Skip to main content
Validação HTML

Qualquer descendente “input” de um elemento “label” com um atributo “for” deve ter um valor de ID que corresponda a esse atributo “for”.

Sobre este problema HTML

O elemento label representa uma legenda para um controlo de formulário. Existem duas formas de associar um label com o seu controlo:

  1. Associação implícita — Coloque o controlo de formulário diretamente dentro do elemento label. Não é necessário nenhum atributo for porque o browser automaticamente emparelha a etiqueta com o controlo aninhado.
  2. Associação explícita — Use o atributo for no label, definindo o seu valor para o id do controlo de formulário alvo. O controlo não precisa de estar aninhado dentro do label neste caso.

Ambos os métodos são válidos por si só. O problema ocorre quando você os combina incorretamente: você aninha um input dentro de um label que tem um atributo for, mas o input ou não tem id ou tem um id que não corresponde ao valor do for. Isto cria uma contradição — o atributo for aponta para um id específico, mas o input aninhado não cumpre essa referência. Os browsers podem lidar com isto de forma inconsistente, e tecnologias assistivas como leitores de ecrã podem falhar ao anunciar a etiqueta corretamente, prejudicando a acessibilidade.

Por que isto importa

  • Acessibilidade: Os leitores de ecrã dependem do emparelhamento for/id para anunciar etiquetas para controlos de formulário. Um id incompatível ou em falta pode deixar o controlo sem etiqueta para utilizadores que dependem de tecnologia assistiva.
  • Conformidade com padrões: A especificação HTML requer que quando um atributo for está presente, deve referenciar o id de um elemento rotulável. Uma incompatibilidade viola esta regra.
  • Comportamento do browser: Alguns browsers vão recorrer à associação implícita quando o for não resolve, mas outros podem priorizar a associação explícita quebrada, deixando o controlo efetivamente sem etiqueta.

Como corrigir

Você tem duas opções:

  1. Remover o atributo for se o input já está aninhado dentro do label. A associação implícita é suficiente por si só.
  2. Adicionar ou corrigir o id no input aninhado para que corresponda exatamente ao valor do atributo for.

Exemplos

❌ Input aninhado sem id correspondente

O atributo for diz "email", mas o input não tem id nenhum:

<label for="email">
  Email
  <input type="email" name="email">
</label>

❌ Input aninhado com id incompatível

O atributo for diz "email", mas o id do input é "user-email":

<label for="email">
  Email
  <input type="email" name="email" id="user-email">
</label>

✅ Corrigir removendo o atributo for (associação implícita)

Como o input está aninhado dentro do label, a associação é automática:

<label>
  Email
  <input type="email" name="email">
</label>

✅ Corrigir adicionando um id correspondente (associação explícita)

O valor do for e o valor do id são idênticos:

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

✅ Corrigir usando associação explícita sem aninhamento

Se você preferir manter o atributo for, o input não precisa de estar aninhado:

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

Na maioria dos casos, escolher ou associação implícita ou explícita — em vez de misturar ambas — é a forma mais simples de evitar este erro. Se você combinar ambas, apenas certifique-se de que o valor do for e o valor do id correspondem exatamente.

Encontre problemas como este automaticamente

O Rocket Validator analisa milhares de páginas em segundos, detetando problemas HTML em todo o seu site.

Ajude-nos a melhorar os nossos guias

Este guia foi útil?

Pronto para validar os seus sites?
Comece o seu teste gratuito hoje.