Formulário de Cadastro HTML CSS Pronto

Menu Sidebar

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

Criar um formulário de cadastro bonito e funcional é uma das primeiras etapas para quem está aprendendo desenvolvimento web. Neste artigo, você vai ver como fazer um formulário do zero usando apenas HTML e CSS.

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

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.

CSS

.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 !

Agora você tem um formulário de cadastro pronto para usar em qualquer projeto! Com HTML e CSS básicos, é possível fazer algo funcional e com um design agradável.

Se quiser ir além, você pode:

Adicionar validação com JavaScript
Integrar com um backend (PHP, Node.js, etc.)
Melhorar o design com animações ou bibliotecas como Bootstrap

Veja o Resultado !

Formulário de Cadastro Html Css Pronto

Baixar Código Veja Funcionando

Publicado por: Loop Nerd

21.438 Visualizações

Formulários HTML e CSS Prontos,Html e css

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

Botão Html Css Background Animado

Menu Full Screen CSS

Menu

Newsletter

Perfil

Contato

E-mail