Semântica de Formulários HTML5: fieldset, legend, label e optgroup

Em 2015, respondi uma pergunta no Stack Overflow em Português explicando quatro elementos de formulário HTML que a maioria dos desenvolvedores ignorava: <fieldset>, <legend>, <label> e <optgroup>. Essas tags existiam no HTML há anos, mas a maioria dos formulários que eu via usava <div> para tudo.

A Resposta de 2015: O Que Essas Tags Realmente Fazem

`<label>` — Expande a Área de Clique

A mais prática. Um <label> associa texto a um controle de formulário. Clique no label, e o input recebe foco:

<!-- Clique "Email" para focar o input -->
<label for="email">Email</label>
<input type="email" id="email" />

<!-- Ou envolva o input -->
<label>
  Email
  <input type="email" />
</label>

Sem <label>, usuários precisam clicar na caixinha minúscula do input. Com ele, o texto inteiro vira clicável. No mobile, essa diferença é enorme.

`<fieldset>` e `<legend>` — Agrupam Campos Relacionados

<fieldset>
  <legend>Endereço de Entrega</legend>
  <label>Rua <input type="text" name="rua" /></label>
  <label>Cidade <input type="text" name="cidade" /></label>
  <label>CEP <input type="text" name="cep" /></label>
</fieldset>

<fieldset> desenha uma borda visual ao redor de campos relacionados. <legend> fornece o título do grupo. A maioria dos desenvolvedores pulava esses porque o estilo padrão do navegador parecia datado — uma borda elevada com o texto do legend interrompendo.

`<optgroup>` — Agrupa Opções do Select

<select name="carro">
  <optgroup label="Carros Suecos">
    <option>Volvo</option>
    <option>Saab</option>
  </optgroup>
  <optgroup label="Carros Alemães">
    <option>Mercedes</option>
    <option>BMW</option>
  </optgroup>
</select>

Agrupa opções num dropdown com cabeçalhos em negrito não-selecionáveis. Simples, útil e raramente usado.

Por Que Desenvolvedores Pulavam

Em 2015, os motivos eram majoritariamente cosméticos:

<fieldset> tinha bordas padrão feias difíceis de sobrescrever
Posicionamento de <legend> era inconsistente entre navegadores
<label> “funcionava” sem o atributo for (só não associava com o input)
<optgroup> não podia ser muito estilizado

Desenvolvedores usavam <div class="form-group"> e estilizavam tudo manualmente. Ficava mais bonito. Funcionava para usuários com visão usando mouse. E isso bastava — em 2015.

A Realidade de 2026: Acessibilidade Tornou Obrigatório

Conformidade WCAG não é opcional mais. Processos de acessibilidade, requisitos governamentais e o EU Accessibility Act tornaram formulários semânticos uma exigência de negócio. E esses quatro elementos são a fundação.

Leitores de Tela Precisam de fieldset + legend

Quando um leitor de tela encontra um grupo de radio buttons sem <fieldset>:

“Botão de rádio: Sim” — Sim para o quê?

Com <fieldset> e <legend>:

“Grupo assinar newsletter. Botão de rádio: Sim”

O <legend> fornece contexto que leitores de tela anunciam antes de cada campo no grupo. Sem ele, radio buttons e checkboxes perdem o significado.

label É Inegociável

Todo input precisa de um <label>. Ponto. Ferramentas automatizadas de acessibilidade marcam inputs sem label como erros. Placeholder não é substituto — desaparece quando o usuário digita, sem deixar label visível.

<!-- Falha WCAG -->
<input type="email" placeholder="Email" />

<!-- Passa WCAG -->
<label for="email">Email</label>
<input type="email" id="email" />

CSS Alcançou

As limitações de estilização que afastavam desenvolvedores dos elementos semânticos de formulário acabaram. CSS moderno lida com <fieldset> e <legend> tranquilamente:

fieldset {
  border: 1px solid #333;
  border-radius: 8px;
  padding: 1.5rem;
}

legend {
  font-weight: 600;
  padding: 0 0.5rem;
}

Sem hacks, sem workarounds. Os elementos são totalmente estilizáveis em todo navegador moderno.

Conclusão

Em 2015, esses elementos de formulário pareciam relíquias — tags mal estilizadas de uma web mais antiga. Em 2026, são a fundação de formulários acessíveis. <label> expande áreas de clique e fornece contexto para leitores de tela. <fieldset> e <legend> agrupam campos de forma que leitores de tela podem anunciar. <optgroup> organiza dropdowns longos.

Pule eles e seu formulário pode parecer bonito — mas não vai funcionar para todos.