Como criar Formulários com CSS e Html

Como criar Formulários com CSS e Html?

Nesse tutorial vamos aborda a customização de um simples formulário em html usando estilos de css para estilizar.

Formulários são algumas das mais partes mais importantes nas paginas da web para juntar informações importantes sobre o usuário da internet. Informações como e-mail, nome, endereço, telefone e qualquer outro tipo de informação.

As tags HTML para formulários e sua estilização com CSS

Os diferentes tipos de formulários que você insere em seu documento HTML são apresentados com um formato e cores padrão, que nem sempre estão de acordo com o projeto visual da sua página.

Com uso de CSS você pode alterar a apresentação dos diferentes objetos de formulário.

veja as regras básicas que permitem o controle sobre a apresentação dos formulários.

As tags HTML para formulários abordadas são as listadas abaixo:

• input;
• textarea;
• form;

Vamos Adicionar o HTMl:

  <form class="my-formulario" action="#" method="post">
                    
       <h1>Fale Conosco</h1>

       <label class="label">
                        
             <input class="effect-line" type="text" placeholder="Nome" autocomplete="off">
             <span class="focus-border"></span>
                    
       </label>

        <label class="label">
                        
             <input class="effect-line" type="text" placeholder="E-mail" autocomplete="off">
             <span class="focus-border"></span>
                    
        </label>

        <label class="label">
                        
             <input class="effect-line" type="text" placeholder="Assunto" autocomplete="off">
             <span class="focus-border"></span>
                    
        </label>

        <label class="label">
                        
            <textarea class="effect-line" placeholder="Mensagem" name="mensagem" rows="3" autocomplete="off"></textarea>
            <span class="focus-border"></span>
                    
        </label>

        <input type="hidden" name="acao" value="enviar">
        <button class="btn-enviar" title="Enviar">Enviar</button>

</form>

Vamos Adicionar o Css:

.my-formulario h1 { font-size:1.6em; color:#33dbdf; margin-bottom:0.5em; }

.my-formulario { 

    width:100%;
    overflow: hidden;
    background-color: white;
    margin: auto;
    padding: 1em;
    border-radius:6px; 

}

.label{ 

    float:left; 
    width:100%; 
    margin-bottom:20px; 
    position:relative; 

}

input[type="text"],textarea{ 

    font-family:'open_sansregular';
    font-size:1.3em; 
    color: #a2a2a2; 
    width: 100%; 
    box-sizing:border-box;
    outline:none; 
}

.effect-line:focus { color:#33dbdf; }

.effect-line {

    border:0; 
    padding:7px 0; 
    border-bottom:1px solid #f0f0f0;

}

.effect-line ~ .focus-border{

    position:absolute; 
    bottom:0; 
    left:0; 
    width:0; 
    height:3px; 
    background-color: #33dbdf; 
    transition: 0.5s;}

.effect-line:focus ~ .focus-border{ width:100%; transition:0.4s; }

.btn-enviar { 
    
    width: 160px;
    float: left;
    background: #33dbdf;
    color: #ffffff;
    border: none;
    cursor: pointer; 
    padding: 0.4em 0em; 
    font-size: 1.5em;
    font-family:'open_sansregular';
    transition:0.4s; 
}

.btn-enviar:hover { background-color:#4c4c4c; transition:0.4s; }

*RESPONSIVO*/

/*768PX BREAKPOINT*/
@media (min-width:48em){

.my-formulario { width:60%; }

}

/*1280PX BREAKPOINT*/
@media (min-width:80em){

.my-formulario { width:40%; }
 
} 

Viu Como criar Formulários com CSS e Html não é tão complicado como algumas pessoas dizem por ai.

Baixar Código Veja Funcionando