HTML label: conectar for e id e ampliar a área de clique

HTML <label> associa o nome de um controle de formulário ao seu texto visível e às tecnologias assistivas. Conecte o for do rótulo ao id do controle, ou coloque o controle dentro do rótulo. Clicar no texto associado pode focar uma entrada ou alternar uma caixa de seleção.

Conecte controles explicitamente com for e id

O atributo for utiliza o id do controle de destino no mesmo documento, não o seu name. Um id deve ser único dentro do documento, enquanto o name identifica um campo nos dados enviados. Mesmo que o layout separe label e input, sua relação de nomes pode permanecer intacta quando o for e id corresponderem.

Salve o seguinte documento como labels.html e abra-o em um navegador. O campo de entrada de texto utiliza for; a caixa de seleção utiliza um rótulo envolvente. Este é um exercício de interface que não envia dados para um servidor.

<!doctype html>
<html lang="pt">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Comparar associações de label</title>
</head>
<body>
  <h1>Nomes dos controles de formulário</h1>
  <p>
    <label for="reader-name">Nome de exibição</label>
    <input id="reader-name" name="reader" type="text"
           aria-describedby="name-help" placeholder="ex.: Céu">
  </p>
  <p id="name-help">Digite o apelido que será exibido na tela.</p>
  <p>
    <label>
      <input type="checkbox" name="tips" value="yes">
      Receber novidades de aprendizagem
    </label>
  </p>
</body>
</html>

1. Clique em Nome de exibição para colocar o cursor no campo de entrada. Depois de digitar, o espaço reservado desaparece, mas o rótulo permanece visível.
2. Clique no texto Receber novidades de aprendizagem para selecionar a caixa de seleção e, em seguida, clique novamente para desmarcá-la. Você não precisa clicar precisamente na pequena caixa.
3. Use Tab para mover entre os controles e Espaço para alternar a caixa de seleção, verificando também a interação com o teclado.

Rótulos envolventes e descrições suplementares servem a diferentes funções

Colocar um input dentro de um label cria uma associação implícita sem for. Inclua apenas o controle associado dentro de um rótulo e não aninhe outro rótulo dentro dele. Você também pode usar id e for com um rótulo envolvente, mas for deve se referir ao controle contido. Uma associação explícita for/id vale a pena considerar para compatibilidade com tecnologias assistivas e ferramentas externas.

O rótulo é o nome que indica aos leitores o que inserir. Coloque instruções suplementares ou mensagens de erro em um parágrafo separado e associe-as ao aria-describedby. No exemplo, Digite o apelido que será exibido na tela. complementa o nome; o placeholder não é usado como substituto do rótulo.

Quando a associação ou o clique não funcionar

Verifique se há erros de digitação e diferenças de maiúsculas e minúsculas em for, valores duplicados id e o tipo do elemento de destino. Apontar for para um elemento que não pode ser rotulado, como um input hidden, não fará com que funcione como um input normal. Os rótulos também funcionam com select e textarea; nomeie grupos de opções relacionadas com fieldset e legend.

Colocar links ou botões separados dentro de um rótulo pode tornar confuso se o clique deve navegar ou selecionar um controle. Coloque links extras fora e explique o contexto primeiro. Estilize o rótulo com CSS em vez de inserir um elemento de cabeçalho apenas para aumentá-lo. As regras e os controles suportados são descritos na referência de label na MDN.