Carregando...

Formulário de Cadastro Html Css Pronto

Postado: 13 de outubro de 2023

Formulário de Cadastro Html Css Pronto

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

13.570 Visualizações

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

  1. opções binárias disse:

    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.

  2. opções binárias disse:

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

  3. Loop Nerd disse:

    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

  4. ATTILA ALVES disse:

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

Deixe um comentário

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *

Artigos Relacionados