Formulários

Formulários em HTML

Alguns sites e praticamente todas as aplicações web necessitam coletar informações dos usuários, o que é feito por meio de formulários.

A flexibilidade dos formulários HTML faz com que sejam uma das estruturas mais complexas do HTML. É possível construir diversos tipos de formulários utilizando elementos e atributos específicos. Utilizar a estrutura correta garante que o formulário seja utilizável e acessível.

O elemento form

O elemento <form> define o formulário em HTML. Ele delimita todos os campos que fazem parte do formulário e também pode possuir atributos que controlam seu comportamento.

Sempre que desejamos criar um formulário HTML, devemos utilizar o elemento <form> e colocar todos os campos dentro dele.

Os formulários são compostos por diferentes componentes, como caixas de texto, checkboxes, botões de rádio, listas de seleção e botões.

Caixas de Texto

As caixas de texto permitem a entrada de dados por meio do teclado. Elas são criadas utilizando o elemento <input>.

Para criar uma caixa de texto comum utilizamos o atributo type="text".

O atributo name é utilizado para identificar o campo quando os dados são enviados para o servidor.

Também podemos adicionar rótulos utilizando o elemento <label>, que descreve o campo para o usuário.

<label for="nome_id">Nome:</label>
<input type="text" name="nome" id="nome_id">

<label for="endereco_id">Endereço:</label>
<input type="text" name="endereco" id="endereco_id">

Caixas de entrada específicas

O atributo type do elemento <input> permite criar diferentes tipos de campos de entrada.

type="number" – coleta valores numéricos. Pode usar os atributos min, max e step.
type="email" – coleta endereços de e-mail.
type="tel" – coleta números de telefone.
type="password" – utilizado para entrada de senhas.

Também existem tipos específicos para datas e horários:

type="date" – dia, mês e ano
type="datetime" – data e hora
type="month" – mês e ano
type="time" – horário
type="week" – semana do ano

Textarea

O elemento <textarea> permite coletar textos maiores com múltiplas linhas.

<label for="mensagem">Mensagem:</label>
<textarea id="mensagem" name="mensagem"></textarea>

Checkboxes e Radios

Os elementos checkbox e radio permitem selecionar opções em formulários. Ambos utilizam o elemento <input>.

type="checkbox" – permite selecionar múltiplas opções.
type="radio" – permite selecionar apenas uma opção.

Esses elementos devem possuir o atributo value, que representa o valor da opção selecionada.

Elementos que possuem o mesmo atributo name pertencem ao mesmo grupo.

<input type="checkbox" name="interesses" value="tecnologia"> Tecnologia
<input type="checkbox" name="interesses" value="esportes"> Esportes

<input type="radio" name="genero" value="masculino"> Masculino
<input type="radio" name="genero" value="feminino"> Feminino

Listas de opções

Para selecionar opções a partir de uma lista utilizamos o elemento <select> juntamente com <option>.

<select name="cidade">
  <option value="sp">São Paulo</option>
  <option value="rj">Rio de Janeiro</option>
  <option value="mg">Minas Gerais</option>
</select>

Por padrão apenas uma opção pode ser selecionada. O atributo multiple permite selecionar mais de uma opção.

Botões

Os botões em formulários são criados utilizando o elemento <button>.

type="button" – botão comum sem comportamento padrão.
type="submit" – envia os dados do formulário para o servidor.
type="reset" – limpa os dados preenchidos no formulário.

<button type="submit">Enviar</button>
<button type="reset">Limpar</button>

Fieldset e Legend

Os elementos <fieldset> e <legend> são utilizados para agrupar campos relacionados dentro de um formulário.

O <fieldset> cria um contêiner para os campos, enquanto o <legend> define o título desse grupo.

<fieldset>
  <legend>Dados Pessoais</legend>

  <label for="nome">Nome:</label>
  <input type="text" id="nome" name="nome">

</fieldset>

Campos obrigatórios

Para indicar que um campo é obrigatório utilizamos o atributo required.

<input type="text" name="nome" required>

Exemplos de elementos de formuluários

Elemento / Descrição	Exemplo de uso	Resultado visual
input type="text" Campo de texto simples para entrada de dados curtos.	`<input type="text" name="nome">`
input type="email" Campo para entrada de e-mail com validação automática.	`<input type="email" name="email">`
input type="number" Campo para números, podendo definir limites.	`<input type="number" min="0" max="100">`
input type="password" Campo para digitação de senha, ocultando os caracteres.	`<input type="password" name="senha">`
textarea Campo para textos longos com múltiplas linhas.	`<textarea name="mensagem"></textarea>`
input type="checkbox" Permite selecionar múltiplas opções.	`<input type="checkbox" value="html"> HTML`	HTML
input type="radio" Permite selecionar apenas uma opção dentro de um grupo.	`<input type="radio" name="curso"> ADS`	ADS
select Lista suspensa para escolher opções.	`<select> <option>HTML</option> <option>CSS</option> </select>`
button Botão para executar ações ou enviar formulários.	`<button type="submit">Enviar</button>`