- Página Inicial
- Códigos CSS Prontos
- Como criar um formulário em html e css
- Voltar
Como criar um formulário em html e css
Este tutorial veremos como criar um formulário em html e css.
O formulário HTML é representado pela tag de abertura <form> e a de fechamento </form>. Dentro dessas tags, serão colocados todos os elementos que compõem este formulário.
Na tag <form> podemos usar os atributos method e o atributo action.
O atributo action define o local através de uma URL no qual serão enviados todos os dados digitados nos campos do formulário.
O atributo method define o método HTTP com que o formulário HTML irá lidar com os dados recebidos. São: o método GET e o método POST.
Nesta seção, projetaremos uma estrutura na tag de abertura <form>.
temos dentro da tag <form> as tag <div>, <input> e <textarea>.
Essas tags usaremos para criar o nosso formulário.
Vamos Adicionar o HTML:
<form class="formulario" method="post" action="#"> <div class="metade left"> <input type="text" placeholder="Nome" required=""> <input type="email" placeholder="E-mail" required=""> <input type="text" placeholder="Assunto" required=""> </div> <div class="metade right"> <textarea name="mensagem" type="text" placeholder="Mesagem" required=""></textarea> </div> <input type="submit" value="Enviar Dados" class="btn-submit"> </form>
Vamos Adicionar o CSS
Nesta seção, usaremos algumas propriedades CSS para estilizar o formulário Html
.
.formulario { max-width: 650px; text-align: center; margin: 20px auto; } .formulario input, form textarea { border: 0; outline: 0; padding: 0.8em; -moz-border-radius: 8px; -webkit-border-radius: 8px; border-radius: 8px; display: block; width: 100%; margin-top: 16px; font-family:'open_sansregular'; font-size:16px; color:#424242; -moz-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1); -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1); box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1); resize: none; } .formulario input:focus, .formulario textarea:focus { color:#3cafe7; -moz-box-shadow: 0 0px 2px #3cafe7 !important; -webkit-box-shadow: 0 0px 2px #3cafe7 !important; box-shadow: 0 0px 2px #3cafe7 !important; } .formulario .btn-submit { color: #fff; background: #3cafe7 ; cursor: pointer; transition: 0.5s; } .formulario .btn-submit:hover { background-color:#424242; -moz-box-shadow: 0 1px 1px 1px rgba(170, 170, 170, 0.6); -webkit-box-shadow: 0 1px 1px 1px rgba(170, 170, 170, 0.6); box-shadow: 0 1px 1px 1px rgba(170, 170, 170, 0.6); } .formulario textarea { height: 174px; } .metade { float: left; width: 48%; margin-bottom: 1em; } .right { width:50%;} .left { margin-right:2%; } @media (max-width: 768px) { .metade { width:100%; float:none; margin-bottom:0; } }
Combinando as Duas seções acima Html e Css temos o seguinte Resultado!
Veja o Resultado baixo!
Baixar Código Veja Funcionando
Publicado por: Loop Nerd
2.767 Visualizações
Obrigado Ana Julia!
Temos artigo novo todos os dias!
Legal