Como criar um Formulário completo em HTML

Ok, se leu e estudou todos os tutoriais sobre formulários em HTML de nosso curso, já deve estar mestre nas artes de criar forms para seus sites.
Embora tenhamos dado exemplos e exercícios, só isso não basta.

Agora vamos usar tudo que sabemos e pôr nossos conhecimentos em prática.
Neste tutorial iremos criar uma página com todos os formulários que aprendemos, criando uma página completa de cadastro.

Clique aqui e obtenha seu Certificado do Curso de HTML

Tutorial: Como criar um formulário HTML para um site com a tag <form>

Ao longo deste artigo iremos mostrar, passo-a-passo, e comentando cada linha de código HTML, como fazer uma página de um site com um formulário completo, usando diversos conceitos que aprendemos no decorrer desta seção de nosso curso.

E já citando o primeiro tutorial desta seção, vimos que para iniciar um formulário devemos usar a tag <form>, onde vamos usar dois atributos, o "action" que vai receber a URL do script de programação que vai tratar os dados do formulário preenchido pelo usuário e o atributo "method", que se refere a maneira na qual esses dados serão enviados.
Esses detalhes veremos quando estudarmos linguagens de programação para web.

O que devemos saber sobre a tag form é que ela envolve uma série de campos, que no nosso caso terá a seguinte sintaxe:

<form action="Script_do_Formulario.php" method="post">
 campos do formulário
 aqui dentro das tags
</form>

Com a estrutura básica montada e explicada, vamos criar os diferentes grupos do formulário, que são os campos de dados, campos de endereço e os campos de login.


Campos de Dados Pessoais

Vamos definir nosso primeiro bloco de fieldset, para colocar os dados pessoas, como Nome, Sobrenome, RG, CPF e Data de Nascimento.
Este trecho do código começa pelo comentário:
<!-- DADOS PESSOAIS-->

Usamos a tag <legend> para criar uma descrição para cada tipo de fieldset, que se chamará "Dados Pessoais".
Como são diversos campos, e todos terão labels (legenda descritiva do campo), usaremos os conceitos de tabelas em HTML para organizar e alinhas nossos campos.

O que basicamente vamos fazer é colocar o nome do campo em uma coluna e o campo na coluna ao lado, assim teremos sempre o nome (label) lado a lado do campo (<input>).

Assim, nesse primeiro grupo de campos, usaremos apenas um tipo de campo de formulário, o de Caixa de Texto. Apenas atentamos para o fato de limitar o número de caracteres no RG em 13 números.
Também dividimos os campos de CPF em dois campos diferentes, para o leitor saber bem que no primeiro campo vão os 9 primeiros dígitos, depois tem um hífen e por fim um campo que cabe os dois dígitos identificadores.

Como há muita confusão para preencher uma data, colocamos valores pré-definidos em cada campo, para sinalizar que queremos data no padrão: dd/mm/aaaa




Campos de Dados do Endereço

Para os dados de endereço, como rua, número, bairro e cidade, iremos fazer igual como fizemos com os campos de dado pessoal, usando caixas de texto.
Este trecho do código é iniciado pelo comentário:
<!-- ENDEREÇO -->

A única diferença aqui é o uso de menu através das tags <selection> e <option>. para criar todas as opções de estados brasileiros. O código é longo, mas bem simples de entender.

Aqui é importante frisar o uso dos atributos name, e que cada um desses campos tenham nomes distintos, para não haver confusão na hora que enviarmos esses dados para um script no servidor.

Campos de Dados de Login

Essa seção, no código HTML, é identificada pelo comentário:
<!-- DADOS DE LOGIN -->

Para fazer os campos do formulário responsáveis pelo sistema de login, usamos caixas de texto para pedir o login e o e-mail.
Já para pedir a senha e sua confirmação, usamos o que aprendemos em caixas de password.

E aqui uma novidade: usamos um campo do tipo file, que automaticamente cria um botão para que possamos carregar um arquivo de nosso HD.
Para usar essa ferramenta, basta colocar "file" como o valor do atributo type da tag <input>:
<input type="file" name="imagem" >

E por fim, criamos dois simples botões.
Um botão de reset (limpar campos) e de submit (enviar).

Código HTML de nosso Tutorial sobre Formulários

<!DOCTYPE html>
 
<html>
 <head>
 <title> Como criar um formulário completo em HTML </title>
 <meta name="description" content="Aprenda a criar um site completo que usa formulários em HTML">
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
 </head>

 <body>
  <h1> Bem vindo ao site HTML Progressivo</h1> 
  <h2> Preencha o formulário abaixo para participar do curso de HTML & CSS completo, online e grátis</h2><br />

<form action="Script_do_Formulario.php" method="post">

<!-- DADOS PESSOAIS-->
<fieldset>
 <legend>Dados Pessoais</legend>
 <table cellspacing="10">
  <tr>
   <td>
    <label for="nome">Nome: </label>
   </td>
   <td align="left">
    <input type="text" name="email">
   </td>
   <td>
    <label for="sobrenome">Sobrenome: </label>
   </td>
   <td align="left">
    <input type="text" name="sobrenome">
   </td>
  </tr>
  <tr>
   <td>
    <label>Nascimento: </label>
   </td>
   <td align="left">
    <input type="text" name="dia" size="2" maxlength="2" value="dd"> 
   <input type="text" name="mes" size="2" maxlength="2" value="mm"> 
   <input type="text" name="ano" size="4" maxlength="4" value="aaaa">
   </td>
  </tr>
  <tr>
   <td>
    <label for="rg">RG: </label>
   </td>
   <td align="left">
    <input type="text" name="rg" size="13" maxlength="13"> 
   </td>
  </tr>
  <tr>
   <td>
    <label>CPF:</label>
   </td>
   <td align="left">
    <input type="text" name="cpf" size="9" maxlength="9"> - <input type="text" name="cpf2" size="2" maxlength="2">
   </td>
  </tr>
 </table>
</fieldset>

<br />
<!-- ENDEREÇO -->
<fieldset>
 <legend>Dados de Endereço</legend>
 <table cellspacing="10">

  <tr>
   <td>
    <label for="rua">Rua:</label>
   </td>
   <td align="left">
    <input type="text" name="rua">
   </td>
   <td>
    <label for="numero">Numero:</label>
   </td>
   <td align="left">
    <input type="text" name="numero" size="4">
   </td>
  </tr>
  <tr>
   <td>
    <label for="bairro">Bairro: </label>
   </td>
   <td align="left">
    <input type="text" name="bairro">
   </td>
  </tr>
  <tr>
   <td>
    <label for="estado">Estado:</label>
   </td>
   <td align="left">
    <select name="estado"> 
    <option value="ac">Acre</option> 
    <option value="al">Alagoas</option> 
    <option value="am">Amazonas</option> 
    <option value="ap">Amapá</option> 
    <option value="ba">Bahia</option> 
    <option value="ce">Ceará</option> 
    <option value="df">Distrito Federal</option> 
    <option value="es">Espírito Santo</option> 
    <option value="go">Goiás</option> 
    <option value="ma">Maranhão</option> 
    <option value="mt">Mato Grosso</option> 
    <option value="ms">Mato Grosso do Sul</option> 
    <option value="mg">Minas Gerais</option> 
    <option value="pa">Pará</option> 
    <option value="pb">Paraíba</option> 
    <option value="pr">Paraná</option> 
    <option value="pe">Pernambuco</option> 
    <option value="pi">Piauí</option> 
    <option value="rj">Rio de Janeiro</option> 
    <option value="rn">Rio Grande do Norte</option> 
    <option value="ro">Rondônia</option> 
    <option value="rs">Rio Grande do Sul</option> 
    <option value="rr">Roraima</option> 
    <option value="sc">Santa Catarina</option> 
    <option value="se">Sergipe</option> 
    <option value="sp">São Paulo</option> 
    <option value="to">Tocantins</option> 
   </select>
   </td>
  </tr>
  <tr>
   <td>
    <label for="cidade">Cidade: </label>
   </td>
   <td align="left">
    <input type="text" name="cidade">
   </td>
  </tr>
  <tr>
   <td>
    <label for="cep">CEP: </label>
   </td>
   <td align="left">
    <input type="text" name="cep" size="5" maxlength="5"> - <input type="text" name="cep2" size="3" maxlength="3">
   </td>
  </tr>
 </table>
</fieldset>
<br />

<!-- DADOS DE LOGIN -->
<fieldset>
 <legend>Dados de login</legend>
 <table cellspacing="10">
  <tr>
   <td>
    <label for="email">E-mail: </label>
   </td>
   <td align="left">
    <input type="text" name="email">
   </td>
  </tr>
  <tr>
   <td>
    <label for="imagem">Imagem de perfil:</label>
   </td>
   <td>
    <input type="file" name="imagem" >

   </td>
  </tr>
  <tr>
   <td>
    <label for="login">Login de usuário: </label>
   </td>
   <td align="left">
    <input type="text" name="login">
   </td>
  </tr>
  <tr>
   <td>
    <label for="pass">Senha: </label>
   </td>
   <td align="left">
    <input type="password" name="pass">
   </td>
  </tr>
  <tr>
   <td>
    <label for="passconfirm">Confirme a senha: </label>
   </td>
   <td align="left">
    <input type="password" name="passconfirm">
   </td>
  </tr>
 </table>
</fieldset>
<br />
<input type="submit">
<input type="reset" value="Limpar">
</form>

 </body>
</html>

Resultado do código HTML do Tutorial sobre Formulários



Dados Pessoais
-


Dados de Endereço
-


Dados de login

25 comentários:

jhessi disse...

quero aprender a colorir essas letras do formulario

PFL626 disse...

gostaria de saber como faço para salvar os dados do formulario, já que o site que estou desenvolvendo é no WIX.com um local que cria sites gratuitos.

Taurus Midia Digital disse...

Como eu faço para enviar as informação pra o meu email quando finalizar o cadastro?

Augusto Filipe disse...

Gostei imenso da esplicação foi uma das melhores, se não mesmo a melhor esplicação que eu ja tive.
muito obrigado pelo teu bloog e por esta postagem, ajudou-me bastante.
eu estou a estudar em um país de lingua oficial Englesa e estava a procura de alguns conseitos básico de HTML para fantasiar o meu projecto final e está explicação foi super.
Eu estudo com o idioma Englês mas gosto mais de pesquisar as coisas em portugues que é a minha MotherLanguage "Lingua Materna"
I must say:
" Thanks you so much for your help "
By: Augusto Filipe Da Costa Nhanga

Reginaldo Aguiar disse...

como eu jogo o layout do bootstrap em cima disso ai para ficar com uma aparencia mais rica?

Nino disse...

Olá amigo, gostei muito da sua ajuda, por favor, onde eu coloco meu email para receber as informações dos dados?
Obrigado!

Juliana Costa disse...

olá,

quando clico em enviar tá dando erro. como faço para endereçar essas informações para chegar no meu e-mail ?

Juliana Costa disse...

Olá, Boa tarde!

Como faço para receber essas informações no meu e-mail quando as pessoas responderem?

Luiz Alberto Bitencourt Sá disse...

Olá...

Como faço pra que as informações sejam enviadas para o meu E-mail?
No campo do Login, como serão distribuídas as senhas para que cada usuário individualmente possa acessar o conteúdo? E como direcionar o usuário para o conteúdo específico?

Rodrigo Milano disse...

Muito bacana e obrigado por compartilhar.
Para quem quiser aprender como colocar o Bootstrap no layout, pode ir no meu canal onde tenho uma playlist específica para isso:
https://www.youtube.com/user/fulanotutorial

Obrigado

Paulo Vicente disse...

Olá, muito bom!!! É possível enviar o conteúdo do formulário para uma nova janela ou dentro do próprio formulário em uma caixa de texto?

Paulo Vicente disse...

Olá, muito bom!!! É possível enviar o conteúdo do formulário para uma nova janela ou dentro do próprio formulário em uma caixa de texto?

Enfermagem 24 Hr disse...

Boa noite.
Como eu faço para criar um formulário de pedido de orçamento onde tenha um campo para a pessoa escolher a cor do produto e que essa cor apareça no meu e-mail junto com os outros dados. No caso eu não queria simplesmente colocar opções como ( branco, preto, rosa etc) eu queria inserir imagens de quadros pequenos com as cores para a pessoa clicar e selecionar uma cor.

aluisio nonato disse...

por favor nos diga como colocar a pagina para recebermos os dados em outra pagina

Ritinha ferreira disse...

Adorei me ajudou bastante na minha nota pra escola

bleach disse...

na verdade não é um comentario e sim uma pergunta. É possivel exibir dados de uma tabela de banco de dados numa caixa de texto input? Se possível indicar um artigo, dar um exemplo de como fazer ou um video.

Mutio obrigado

Altacir - PortalJob disse...

OLá Pode sim!

Dentro do input usa o parâmetro: value=""/>

Antes claro faz a conexão o banco, query() e pega os dados da tabela em variáveis .

Espero ter ajudado.

Elias Fss disse...

Olá pessoal, estou começando a compartilhar minhas esperiências como programador no youtube. Se alguém puder dar uma força lá com um view para promoção...Cada dia eu postarei um novo vídeo a partir das 00:00hr que é a hora que eu posso gravar. Obrigado a todos e bons estudos. Meu canal

Lua Clara Leggings disse...

Olá, bom dia!

Já fiz todo o processo, mas quando clico para enviar, o botão enviar não carrega.

Desde já agradeço!

Eliel Felipe Quadra disse...

Amiga! Vc precisa ter o Script_do_Formulario.php. Ou seja, criar o script em PHP para
capturar os dados do formulário e enviar para o email desejado.

Da uma olhada nesse exemplo:

http://tableless.com.br/formulario-de-e-mail-e-envio-com-php/

Eliel Felipe Quadra disse...

Espero ter ajudado

Eliel Felipe Quadra disse...

Amiga! Para enviar os dados do formulário, se faz necessário vc criar em PHP ou outra linguagem, o script q irá capturar os dados do formulário e enviar ao email desejado.

Da uma lida nesse link:

http://tableless.com.br/formulario-de-e-mail-e-envio-com-php/

Eliel Felipe Quadra disse...

Amiga! Para enviar os dados do formulário, se faz necessário vc criar em PHP ou outra linguagem, o script q irá capturar os dados do formulário e enviar ao email desejado.

Da uma lida nesse link:

http://tableless.com.br/formulario-de-e-mail-e-envio-com-php/

Anônimo disse...

Muito bom o material, obrigado por compartilhar. Estava usando plugins prontos mas quero fazer umas personalizações

Rodrigo
http://portalwebdesinger.com

Phillip Wasptroy disse...

Ótimo amigo. Isso mesmo. Seria legal utilizar Java.