Gostou do nosso conteúdo? Te ajudou?
Nos ajude também! Faça um PIX, de qualquer valor:
programacao.progressiva@gmail.com

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.




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

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

Unknown disse...

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

Unknown 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

Unknown disse...

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

Nino Guedes disse...

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

Unknown disse...

olá,

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

Unknown disse...

Olá, Boa tarde!

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

Unknown 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?

Unknown 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

Unknown 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?

Unknown 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?

Doula - Daisy Martins 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.

nenezao 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

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

Unknown 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

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

Unknown 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/

Unknown disse...

Espero ter ajudado

Unknown 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/

Unknown 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

Unknown disse...

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

Luis Silva disse...

ola, Gostaria de criar um formulario onde as ultimas 8 respostas fossem visiveis a qq um que acesse a pagina e que toda vez que alguem clicar em ENVIAR o link de uma dessas 8 respostas se abra em uma nova guia,.. isso seria possivel?? queria algo parecido com o mecanismo dos sites
http://www.ajudatube.com ou do divulgatube.com ... poderia me ajudar?

Mamute disse...

boa tarde com o seu formulario eu testo ele e ta dando erro forbidden 403 verificação csrf falhou pedido cancelado

Unknown disse...

// O method="POST" tem que ser postado já que vc quer envia para o seu e-mail.. caso contrário method="GET"//

action="http://www.outrapagina.com"

action="mesma_pagina"

cursos gratuito disse...

como mandar os dados no gamail

Anônimo disse...

como faço para depois abrir o que foi salvo}

Tutoriais de HTML e CSS