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.

É recomendado sempre associar um elemento <label> a cada campo de entrada para melhorar a acessibilidade e a usabilidade do formulário. Isso pode ser feito utilizando o atributo for no <label>, que deve corresponder ao valor do atributo id do campo de entrada. Exemplo:
<label for="nome_id">Nome:</label>
<input type="text" id="nome_id" name="nome">.

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

Atributo `<name>`

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

Ele funciona como o nome da "variável" que armazena o dado fornecido pelo usuário, sendo necessário para o servidor processar as informações.

Sem o atributo name, os dados do campo não serão enviados para o servidor, tornando o campo inútil para fins de processamento. Portanto, é fundamental sempre incluir o atributo name em todos os campos de entrada em um formulário.

Em ambos os casos abaixo, a caixa de entrada será exibida para o usuário e ele poderá preenchê-la:

<label>Nome Completo:</label>
<input type="text">

<label>Nome Completo:</label>
<input type="text" name="nome_usuario">

Contudo, no primeiro caso, os dados não serão enviados para o servidor. No segundo, os dados serão enviados e o servidor irá receber o valor fornecido pelo usuário identificado como nome_usuario. Ex: nome_usuario="William Tenório"

Elementos com opções pré-definidas

Enquanto os campos de entrada padrão permitem a digitação direta do usuário, existem elementos que oferecem opções pré-definidas para seleção.

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.

<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

Elementos de um mesmo grupo de opções (checkboxes ou radios) devem possuir o mesmo valor no atributo name para que sejam tratados como parte do mesmo grupo pelo navegador. No caso dos radios, isso garante que apenas uma opção possa ser selecionada dentro do grupo. No caso dos checkboxes, isso permite que múltiplas opções sejam selecionadas, mas ainda assim sejam agrupadas logicamente.

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 e Agrupamento de elementos

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>

Atributos Úteis

Campos obrigatórios

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

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

Texto temporário

Para indicar um texto temporário (dica) utilizamos o atributo placeholder. Ele orienta o usuário sobre o tipo de dado esperado (ex: "nome@email.com") e desaparece automaticamente ao digitar. É crucial para melhorar a experiência do usuário (UX), mas não deve substituir a tag label por razões de acessibilidade.

<input type="text" name="nome" placeholder="Digite seu nome">

Quantidade mínima e máxima de caracteres

Para indicar a quantidade mínima e máxima de caracteres que um campo pode conter utilizamos os atributos minlength e maxlength.

<input type="text" name="nome" minlength="2" maxlength="100">

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>`

Dica

Nos exercícios a seguir, acrescente o código abaixo após fechamento da tag <body> (antes do </html>):


<script>
	document.getElementById("meu-formulario").addEventListener("submit", function(event) {
		event.preventDefault();
		const formData = new FormData(this);
		const dados = {};
		formData.forEach((value, key) => {
			dados[key] = value;
		});
		alert("[SIMULAÇÃO DE POST AO SERVIDOR]\n\nDados enviados:\n" + JSON.stringify(dados));
	});
</script>

Nos elementos <form> acrescente o atributo id="meu-formulario":