Sobre este problema HTML
O elemento <label> representa uma legenda para um controlo de formulário. Quando você usa o atributo for, o seu valor deve corresponder ao id do controlo de formulário que ele rotula. De acordo com a especificação HTML, um valor do atributo id não deve conter quaisquer caracteres de espaço em branco — isto inclui espaços, tabs, quebras de linha, retornos de carro e form feeds. Como for deve referenciar um ID válido, a mesma restrição aplica-se ao seu valor.
Este erro ocorre tipicamente quando um programador usa um nome separado por espaços (como "user name" ou "first name") em vez de um token contínuo único. Os navegadores podem falhar em estabelecer a associação programática entre o label e o seu controlo de formulário quando o valor for contém espaços em branco. Isto impacta diretamente a acessibilidade: os leitores de ecrã dependem desta associação para anunciar o texto do label quando um utilizador foca no input. Também quebra o comportamento de clique para focar onde clicar num label move o foco para o seu controlo associado.
Para corrigir este problema, substitua qualquer espaço em branco no valor do atributo for com um caráter válido como um hífen (-), sublinhado (_), ou camelCase. Certifique-se de que o id no controlo de formulário correspondente corresponde exatamente.
Exemplos
Incorreto — espaços em branco no atributo for
<form>
<label for="user name">Name</label>
<input type="text" id="user name">
</form>
O valor "user name" contém um espaço, o que o torna uma referência de ID inválida. O validador reportará: Bad value “user name” for attribute “for” on element “label”: An ID must not contain whitespace.
Correto — usando um sublinhado em vez de um espaço
<form>
<label for="user_name">Name</label>
<input type="text" id="user_name">
</form>Correto — usando um hífen em vez de um espaço
<form>
<label for="user-name">Name</label>
<input type="text" id="user-name">
</form>Correto — usando camelCase
<form>
<label for="userName">Name</label>
<input type="text" id="userName">
</form>Incorreto — espaços em branco no início ou fim
Os espaços em branco não têm de estar no meio do valor para desencadear este erro. Espaços no início ou fim também tornam o ID inválido:
<form>
<label for=" email">Email</label>
<input type="text" id=" email">
</form>Isto pode ser fácil de não notar quando os valores são gerados dinamicamente ou copiados de outra fonte. Faça trim ao valor para o corrigir:
<form>
<label for="email">Email</label>
<input type="text" id="email">
</form>Alternativa — envolver o input dentro do label
Se você envolver o controlo de formulário dentro do elemento <label>, não precisa do atributo for de todo. A associação é implícita:
<form>
<label>
Name
<input type="text">
</label>
</form>
Esta abordagem evita completamente potenciais incompatibilidades de ID, embora o emparelhamento explícito for/id seja frequentemente preferido para flexibilidade no layout e estilização.
Encontre problemas como este automaticamente
O Rocket Validator analisa milhares de páginas em segundos, detetando problemas HTML em todo o seu site.