Como criar um formulário HTML (exemplos explicados)

Os formulários são usados ​​para coletar dados dos usuários, como informações de contato, ou para permitir que os usuários interajam com o site, como postar comentários ou realizar pesquisas. Neste artigo, aprenderemos como criar um formulário básico usando HTML.

Estrutura de um formulário HTML

Um formulário HTML é criado usando a tag. Nessa tag, você pode ter vários elementos de entrada diferentes, como campos de texto, botões, caixas de seleção, botões de opção e muito mais.

elementos de entrada vão aqui

Elementos de entrada

Campos de texto

Os campos de texto são criados usando a tag com o atributo tipo colocado em texto. Por exemplo:

Nome:




Telefone

O elemento usado para campos de entrada de número de telefone.

Telefone:


Data

O elemento usado para selecionar uma data.

Data de nascimento:


Senha

O elemento usado para campos de entrada de senha. O texto inserido neste campo é exibido como pontos para ocultar a senha.

Senha:


Arquivo

O elemento é usado para permitir que o usuário selecione um arquivo de seu sistema de arquivos local.

Subir arquivo:


caixa de seleção

O elemento usado para campos de entrada que permitem ao usuário selecionar nenhuma, uma ou várias opções.

eu aceito os termos e condições

Rádio

O elemento usado para campos de entrada que permitem ao usuário selecionar uma opção de um conjunto de opções.

Gênero:

Homem

Mulheres

Número

O elemento usado para campos de entrada numérica.

Quantia:


Faixa

O elemento usado para campos de entrada que devem conter um valor de um intervalo de valores.

Volume:




Botões

Os botões são criados usando a tag com o atributo tipo colocado em enviar. Este botão, quando pressionado, enviará os dados do formulário. Por exemplo:

Nome:




Manipulando entrada de formulário

Quando o botão enviar é pressionado, os dados do formulário são enviados para processamento. Isso é feito por meio de um dos dois métodos: GET ou POST, que são especificados usando o atributo método na etiqueta .

método GET

O método GET envia os dados do formulário como parte da URL. É útil para coisas como pesquisas, onde os dados do formulário não são confidenciais. No entanto, este método tem limitações quanto ao tamanho dos dados que podem ser enviados.

elementos de entrada vão aqui

método POST

O método POST envia os dados do formulário separados da URL. Isso é mais seguro e pode lidar com uma quantidade muito maior de dados, por isso é usado para coisas como envios de formulários de login ou contato.

elementos de entrada vão aqui

Em ambos os casos, o atributo Ação é usado para especificar a URL do script do lado do servidor que processará os dados do formulário.

Exemplo de formulário HTML com todos os elementos 

Aqui está um formulário que usa todos os elementos que analisamos neste artigo:

Formulário de registro

Nome:



Sobrenome:



E-mail:



Telefone:



Data de nascimento:



Senha:



Subir arquivo:



eu aceito os termos e condições


Gênero:

Homem

Mulheres

Quantia:



Volume:




Este formulário possui campos para nome, sobrenome, e-mail, telefone, data de nascimento, senha, um campo para carregar um arquivo, uma caixa de seleção para termos e condições, rádios para escolher gênero e campos de número e intervalo para quantidade e volume, respectivamente.

O botão "Enviar" ao final é o que se encarregaria de enviar o formulário para a URL especificada no atributo Ação da etiqueta forma (neste caso, "/submit_form"). Para que este formulário funcione em um site real, você precisa ter um servidor configurado para receber e processar as informações deste formulário no caminho "/submit_form".