Formulários no HTML5

Formulários são a principal maneira de coletar dados dos usuários na web. O HTML5 trouxe melhorias significativas, como novos tipos de campos, validações nativas e elementos que tornam os formulários mais eficientes, acessíveis e seguros.

Estrutura Básica de um Formulário #

Elemento `<form>` #

Delimita o início e o fim de um formulário.

Sintaxe básica: #

<form action="processa.php" method="post">
  <!-- Campos aqui -->
</form>

Atributo	Descrição
`action`	URL para onde os dados serão enviados.
`method`	Método de envio (`get` ou `post`).

get → Dados visíveis na URL (pesquisas, filtros).
post → Dados enviados de forma oculta (cadastros, senhas, dados sensíveis).

Elementos de Formulário #

Rótulos com `<label>` #

Melhora a acessibilidade e usabilidade.
Associado ao campo via for (id do input).

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

Campos de Entrada `<input />` #

Tipo	Função
`text`	Texto simples.
`password`	Senha (texto oculto).
`email`	Validação de e-mail.
`url`	Validação de URL.
`tel`	Telefone.
`number`	Números (com controle de mínimo e máximo).
`range`	Barra deslizante.
`date`	Seleção de data.
`time`	Seleção de hora.
`color`	Seletor de cor.
`checkbox`	Caixa de seleção (múltiplas escolhas).
`radio`	Botões de opção (escolha única em grupo).
`file`	Upload de arquivos.
`hidden`	Dados ocultos.
`submit`	Botão de envio.
`reset`	Botão para limpar o formulário.
`button`	Botão genérico.

Caixa de Texto Multilinha `<textarea>` #

<label for="mensagem">Mensagem:</label>
<textarea id="mensagem" name="mensagem" rows="4" cols="50"></textarea>

Menu Suspenso `<select>` #

<label for="estado">Estado:</label>
<select id="estado" name="estado">
  <option value="sp">São Paulo</option>
  <option value="rj">Rio de Janeiro</option>
  <option value="mg">Minas Gerais</option>
</select>

Botões #

<button type="submit">Enviar</button>
<button type="reset">Limpar</button>
<button type="button">Ação Personalizada</button>

Novos Tipos de Input no HTML5 #

email, url, tel: Validações automáticas.
date, time, datetime-local, month, week: Campos de datas e horários.
range: Controle deslizante.
color: Seletor de cores.

Validações Nativas #

Atributo	Descrição
`required`	Torna o campo obrigatório.
`min` / `max`	Limita valores numéricos ou datas.
`maxlength`	Limita quantidade de caracteres.
`pattern`	Expressão regular para validação personalizada.
`step`	Define incremento numérico (ex.: 0.5, 1).
`placeholder`	Texto temporário no campo.
`readonly`	Somente leitura.
`disabled`	Desabilita o campo.

Exemplo de validação com `pattern`: #

<input type="text" name="cpf" pattern="\d{3}\.\d{3}\.\d{3}-\d{2}" 
placeholder="000.000.000-00" required />

Agrupamento de Campos #

`<fieldset>` e `<legend>` #

Agrupa campos relacionados.

<fieldset>
  <legend>Informações Pessoais</legend>
  
  <label for="nome">Nome:</label>
  <input type="text" id="nome" name="nome" required />

  <label for="email">Email:</label>
  <input type="email" id="email" name="email" required />
</fieldset>

Exemplo Prático Completo #

<!DOCTYPE html>
<html lang="pt-br">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Formulário de Contato</title>
</head>
<body>

  <h1>Formulário de Contato</h1>

  <form action="enviar.php" method="post">
    <fieldset>
      <legend>Informações Pessoais</legend>

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

      <label for="email">Email:</label><br />
      <input type="email" id="email" name="email" required /><br /><br />

      <label for="telefone">Telefone:</label><br />
      <input type="tel" id="telefone" name="telefone" /><br /><br />

      <label for="estado">Estado:</label><br />
      <select id="estado" name="estado">
        <option value="sp">São Paulo</option>
        <option value="rj">Rio de Janeiro</option>
        <option value="mg">Minas Gerais</option>
      </select><br /><br />
    </fieldset>

    <fieldset>
      <legend>Mensagem</legend>

      <label for="mensagem">Sua Mensagem:</label><br />
      <textarea id="mensagem" name="mensagem" rows="5" cols="50" required></textarea><br /><br />
    </fieldset>

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

</body>
</html>

Melhores Práticas para Formulários #

Utilize <label> sempre associado aos campos (for e id iguais).
Prefira validações nativas com required, pattern e tipos como email e url.
Utilize fieldset e legend para melhorar a organização visual e acessibilidade.
Se possível, combine validação HTML5 com validação no backend.
Utilize placeholders para sugerir formatos, mas nunca os substitua pelo uso de <label>.

Conclusão #

Formulários no HTML5 são muito mais poderosos, acessíveis e seguros. As validações nativas ajudam a evitar erros comuns, melhoram a experiência do usuário e reduzem o trabalho no backend.

Próximo Passo #

No próximo módulo, vamos trabalhar com Elementos Gráficos e Interativos no HTML5, utilizando recursos como <canvas>, <svg>, e <iframe> para criar gráficos, desenhos e incorporar outros conteúdos na página.