Formulário de Cadastro Html Css Pronto

Menu Sidebar

Postado: 13 de outubro de 2023 Tempo de Leitura: 3 Minutos

Este tutorial veremos como criar um template formulário html com css simples.

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>, <span> e o <button>. Essas tags usaremos para criar o nosso formulário de cadastro com Html5 e CSS.

Vamos Adicionar o HTML

    <div class="container_form">

            <h1>Formulário de Cadastro</h1>

            <form class="form" action="#" method="post">
                
                <div class="form_grupo">
                    <label for="nome" class="form_label">Nome</label>
                    <input type="text" name="nome" class="form_input" id="nome" placeholder="Nome" required>
                </div>
                
                <div class="form_grupo">
                    <label for="e-mail" class="form_label">Email</label>
                    <input type="email" name="email" class="form_input" id="email" placeholder="seuemail@email.com" required>
                </div>
                
                <div class="form_grupo">
                    <label for="datanascimento" class="form_label">Data de Nascimento</label>
                    <input type="date" name="datanascimento" class="form_input" id="datanascimento" placeholder="Data de Nascimento" required>
                </div>        

                <div class="form_grupo">
                    
                    <label for="estadocivil" class="text">Estado civil</label>
                    <select name="estadocivil" class="dropdown" required>
                        
                        <option selected disabled class="form_select_option" value="">Selecione</option>
                        <option value="Solteiro" class="form_select_option">Solteiro(a)</option>
                        <option value="Casado" class="form_select_option">Casado(a) </option>
                        <option value="Divorciado" class="form_select_option">Divorciado(a)</option>                    
                        <option value="Viúvo" class="form_select_option">Viúvo(a)</option>                    
                    
                    </select>

                </div>

                <div class="form_grupo">

                    <span class="legenda">Sexo:</span>
                    
                    <div class="radio-btn">
                        <input type="radio" class="form_new_input" id="masculino" name="sexo" value="Masculino" required="required">
                        <label for="masculino" class="radio_label form_label"> <span class="radio_new_btn"></span> Masculino</label>
                    </div>

                    <div class="radio-btn">
                        <input type="radio" class="form_new_input" id="feminino" name="sexo" value="Feminino" required="required">
                        <label for="feminino" class="radio_label form_label"> <span class="radio_new_btn"></span> Feminino</label>
                    </div>

                </div>
              

                <div class="form_grupo">

                    <span class="legenda">Você quer aprender o que ?</span>

                    <div class="check-btn">
                        <input type="checkbox" class="form_new_input" id="html5" name="aprender" value="html5">
                        <label for="html5" class="form_label check_label"> <span class="check_new_btn"></span> Html5</label>
                    </div>

                    <div class="check-btn">
                        <input type="checkbox" class="form_new_input" id="css3" name="aprender" value="css3">
                        <label for="css3" class="form_label check_label"><span class="check_new_btn"></span> Css3</label>
                    </div>

                    <div class="check-btn">
                        <input type="checkbox" class="form_new_input" id="jquery" name="aprender" value="jquery">
                        <label for="jquery" class="form_label check_label"><span class="check_new_btn"></span> jQuery</label>
                    </div>

                    <div class="check-btn">
                        <input type="checkbox" class="form_new_input" id="wordpress" name="aprender" value="wordpress">
                        <label for="wordpress" class="form_label check_label"><span class="check_new_btn"></span> WordPress</label>
                    </div>
                    

                    <div class="form_message">
                        
                        <label for="message" class="form_message_label"> Digite aqui sua sua mensagem:</label>
                        <textarea name="mensagem" id="message" cols="30" rows="3" class="form_input message_input" required></textarea>

                    </div>

                    <div class="submit">

                      <input type="hidden" name="acao" value="enviar">
                      <button type="submit" name="Submit" class="submit_btn" >Cadastrar</button>
                    
                    </div>
            </form>

    </div><!--container_form-->

Vamos Adicionar o CSS

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

.container_form {

    width: 700px;
    margin: auto;
    display: flex;
    flex-direction: column;
    background:#ffffff; 
    box-shadow: 1px 0px 1.2px 0px #e3e3e3; 
    border-radius:3px; 
    padding:1em;

}

.container_form h1 {
    
    font-family:'open_sansregular';
    font-size: 2.3em;
    color: #00dae0;
    border-bottom: 1px #f0eded solid;
    margin-bottom: 10px;
    padding-bottom: 10px;

}

.form_grupo {
    width: 90%;
    margin: 0 auto;
    margin-bottom: 30px;
    position: relative;
}

.form_grupo .legenda { 

    width: 100%;
    float: left;
    margin-top: 15px;
    margin-bottom: 15px;
    font-weight: bold;
}

/* SUBMIT */

.submit { width:100%; float:left; }

.submit_btn {

    float: left;
    display: block;
    padding: 5px 30px;
    border: none;
    outline: none;
    background-color: #6fcffb;
    color: #fff;
    text-shadow: 0 0 5px rgb(0, 0, 0);
    font-family: inherit;
    font-size: 25px;
    font-family:'open_sansregular';
    border-radius: 6px;
    margin: 20px auto;
    cursor: pointer;
    transition: all 0.3s;
}

.submit_btn:hover {

    background-color: #444444;
    transform: scale(1.03);

}

.dropdown {
    display: block;
    margin: 0 auto;
    font-size: 16px;
    font-family: inherit;
    color: #222222;
    border-radius: 4px;
    border: 1px #f2f2f2 solid;
    background: #fdfdfd;
    outline: none;
    padding-left: 10px;
    width: 100%;
}

.form_new_input {
    display: none;
}

.radio_label,
.check_label {

    float: left;
    width: 100%;
    padding-left: 30px;
    cursor: pointer;
    margin-bottom: 8px;

}


.radio_new_btn {

    position: absolute;
    left: 0;
    transform: translateY(3px);
    height: 20px;
    width: 20px;
    border-radius: 50%;
    border: 0.2em solid #4c4c4c;

}

.radio_new_btn::after {

    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: #6fcffb;
    visibility: hidden;

}

.check_new_btn {

    position: absolute;
    left: 0;
    height: 20px;
    width: 20px;
    border: 0.2em solid #4c4c4c;

}

.check_new_btn::after {

    content: "";
    height: 8px;
    width: 8px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: #6fcffb;
    visibility: hidden;

}

.form_new_input:checked ~ .radio_label .radio_new_btn::after,
.form_new_input:checked ~ .check_label .check_new_btn::after {
 
    visibility: visible;
}

.form_new_input:checked ~ .radio_label,
.form_new_input:checked ~ .check_label {
    color: #6fcffb;
}


.form_grupo {

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

}

.form_input {

    font-size: 16px;
    font-family: inherit;
    padding: 8px 15px;
    border-radius: 4px;
    border: 1px #f2f2f2 solid;
    background: #fdfdfd;
    outline: none;
    width: 100%;
    transition: all 0.3s;

}

.form_message,
.form_message .message_input {

    width: 100%;
    float:left;

}

.form_message_label {

    width: 100%;
    float: left;
    margin-top: 15px;
    margin-bottom: 15px;
    font-weight: bold;
    
}

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

Veja o Resultado !

Formulário de Cadastro Html Css Pronto

Baixar Código Veja Funcionando

Publicado por: Loop Nerd

18.791 Visualizações

form,Formulários Html e Css Prontos,HTML básico - Aprendendo desenvolvimento web,Html e css,Html form,Responsivo

7 respostas para “Formulário de Cadastro Html Css Pronto”

Marcos disse:

22 de junho de 2024 às 15:32

estou copiando todo o bloco, eu reparei que se tirar a class=”form_new_input” funciona, mas as opções ficam fora de ordem.

Se puder faz um teste, por favor.

Responder
Marcos disse:

21 de junho de 2024 às 13:40

Olá,

Se alterar a ordem da div do radion no formulário ele para de funcionar, por exemplo, se no formulário sexo vir antes de qualquer outro campo, não funciona mais.

Responder
- Loop Nerd disse:
  
  21 de junho de 2024 às 19:58
  
  Olá Marcos, pode alterar a ordem sim.
  Não dá erro não, só tem que ter cuidado com os fechamento da div -> div class=”form_grupo”
  toda div que abre tem que fechar.
  
  Responder
opções binárias disse:

24 de fevereiro de 2024 às 07:19

Good day! Do you use Twitter? I’d like to
follow you if that would be ok. I’m undoubtedly enjoying your blog and look forward to
new posts.

Responder
opções binárias disse:

24 de fevereiro de 2024 às 05:03

Hi to all, because I am truly keen of reading this blog’s post to be updated
regularly. It consists of good stuff.

Responder
Loop Nerd disse:

20 de novembro de 2023 às 20:54

Olá Attila!
Então, este artigo ensina a criar um formulário de cadastro com vários campos com HTML e CSS.
Porém não envia para um banco de dados e nem para um PHP.

isso é bem variável. exemplo tem formulário de cadastro que envia para um e-mail especifico ou envia para um banco de dados com PHP.

Aqui mesmo no BLOG LOOPNERD você pode pesquisar

Formulário em PHP Pronto
Formulário de contato com ENVIO de ANEXO em php
Como fazer um formulário de envio de e-mail em PHP

Responder
ATTILA ALVES disse:

20 de novembro de 2023 às 20:03

Olá.
E quanto a Consultar este cadastro? Como fica?

Responder

Formulário de Cadastro Html Css Pronto

Menu Horizontal Html e Css

Menu Sidebar

7 respostas para “Formulário de Cadastro Html Css Pronto”

Deixe um comentário Cancelar resposta

Artigos Relacionados

Barra de pesquisa html

Tela de Login Html