Formulário Html Css Pronto

Formulário Html Css Pronto

Este tutorial mostra como criar um formulário HTML e Css.

Veja como criar formulário HTML e CSS, Crie formulários que colete dados do usuário e os envie para outra página.

Um formulário é um elemento essencial em qualquer site. Ele permite que os visitantes enviem informações sobre si mesmos ou sobre seus negócios.

O que são formulários HTML?

Formulários HTML são um dos principais pontos de interação entre um usuário e um web site ou aplicativo. Eles permitem que os usuários enviem dados para o web site. Na maior parte do tempo, os dados são enviados para o servidor da web, mas a página da web também pode interceptar para usá-los por conta própria.

Um formulário HTML é feito de um ou mais widgets. Esses widgets podem ser campos de texto (linha única ou de várias linhas), caixas de seleção, botões, checkboxes ou radio buttons. A maior parte do tempo, estes elementos são emparelhados com uma legenda que descreve o seu objetivo.

Como criar formulário HTML e CSS?

Nesta seção, projetaremos uma estrutura simples na tag <div class=”container_form”>. 

temos dentro da tag <div> a tag <h1>, <form>, <label>, <input>, <select>, <option>, e o <button>. Essas tags usaremos para criar o nosso formulário com Html5 e CSS. 

Vamos Adicionar o HTML

    <div class="container_form">

        <h1 class="title_contato"><i class="icon icon-file-text-o"></i> Fale Conosco</h1>
        
        <form method="post" action="#">

            <div class="style-form-input full">
                <input type="text" name="nome" required />
                <label><i class="icon icon-user-1"></i>  Nome</label> 
            </div>

            
            <div class="style-form-input">
                <input type="text" name="email" required />
                <label><i class="icon icon-mail-1"></i> E-mail</label> 
            </div>

            
            <div class="style-form-input right">
                <input type="text" name="assunto" required />
                <label><i class="icon icon-info-circled"></i> Assunto</label> 
            </div>

            <div class="style-form-input full">
            
                <select name="estadocivil" class="dropdown select_form" required>
                
                <option selected disabled class="form_select_option" value="">Sugestão de Artigos ?</option>
                <option value="Html5" class="form_select_option">Html5</option>
                <option value="Css3" class="form_select_option">Css3 </option>
                <option value="jQuery" class="form_select_option">jQuery</option>                    
                <option value="WordPress" class="form_select_option">WordPress</option>                    
            
                </select>

            </div>    
            
            <div class="style-form-input full">
                <textarea name="mensagem" required></textarea>
                <label><i class="icon icon-comments"></i> Mensagem</label>
            </div>


            <div class="style-form-input full">

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

        </form>

    </div>

Vamos Adicionar o CSS

Nesta seção, usaremos algumas propriedades CSS para projetar o nosso formulário.

.title_contato {

    font-family: 'open_sansregular';
    font-weight: 600;
    font-size:1.8em;
    color: #444;
    text-align: left;
    margin-bottom:10px;
}

input:focus ~ label, textarea:focus ~ label, input:valid ~ label, textarea:valid ~ label {
  
    font-size: 0.8em;
    color: #5be1e5;
    top: -15px;
    -webkit-transition: all 0.225s ease;
    transition: all 0.225s ease;
    background: #fff;
    padding: 7px 6px;
    left: 10px;
    border-radius: ;
    font-weight: bold;


}

.style-form-input {

    float: left;
    width: 295px;
    margin: 1em 0;
    position: relative;
    border-radius: 4px;
}

.right { float:right; }

@media only screen and (max-width: 768px){
    
  .style-form-input { width:100%; }

}

.style-form-input label {
    color: #999;
    padding: 7px 15px;
    position: absolute;
    top: 10px;
    left: 0;
    -webkit-transition: all 0.25s ease;
    transition: all 0.25s ease;
    pointer-events: none;
}

.style-form-input.full { 
    width: 650px;
    max-width: 100%;
}


input,select,
textarea {

    width: 100%;
    padding: 15px;
    border: 0;
    font-size: 1em;
    background-color: #ffffff;
    color: #999;
    border-radius: 6px;
    border: 1px #eeecec solid;

}

input:focus,
textarea:focus { outline: 0; }

input:focus ~ span,
textarea:focus ~ span {
    width: 100%;
    -webkit-transition: all 0.075s ease;
    transition: all 0.075s ease;
}

textarea {
    width: 100%;
    min-height: 7em;
}

.container_form {
    
    width: 650px;
    max-width: 100%;
    overflow: hidden;
    background:#fff; 
    box-shadow: 1px 0px 1.2px 0px #e3e3e3; 
    border-radius:3px; padding:1em; 
    margin: 20px auto 25px auto;
}

.btn-submit {

    width: 100%;
    color: #fff;
    font-size: 1.2em;    
    float: left;
    text-align: center;
    padding: 15px 35px;
    border-radius: 6px;
    display: inline-block;
    background-color: #444444;
    cursor: pointer;
    box-shadow: 0 2px 5px 0 rgba(0,0,0,0.06), 0 2px 10px 0 rgba(0,0,0,0.07);
    -webkit-transition: all 300ms ease;
    transition: all 300ms ease;
    border:none;

}

.btn-submit:hover {
    
    background-color: #5be1e5;
    transform: translateY(2px);
    box-shadow: 0 1px 1px 0 rgba(0,0,0,0.10),
    0 1px 1px 0 rgba(0,0,0,0.08);

}

@media (max-width: 768px) {
    
    .btn-submit {
        
      width:100%;
      float: none;
      text-align:center;
    
    }
}

input[type=checkbox] + label {
  color: #ccc;
  font-style: italic;
} 

input[type=checkbox]:checked + label {

  color: #f00;
  font-style: normal;

}

Combinando as Duas seções acima Html5 e Css3 temos o seguinte Resultado !

Formulário Html Css Pronto

Veja o Resultado !

Baixar Código Veja Funcionando