Curso de HTML / Associar corretamente label e input
Um input recebe o valor de um usuário; um label indica ao usuário para que serve o campo. Uma associação explícita confiável dá ao campo um id e dá ao rótulo um valor for correspondente.
Conecte um rótulo a um campo de entrada
<form method="get">
<label for="visitor-name">Nome</label>
<input id="visitor-name" name="name" type="text">
<button type="submit">Verificar</button>
</form>Coloque este código no body de um arquivo HTML e abra-o em um navegador. Clicar em « Nome » deve colocar o foco no campo. Apenas colocar o texto ao lado de um campo não os conecta automaticamente. Um id deve ser único no documento; IDs duplicados podem fazer com que um rótulo aponte para o campo errado.
Também pressione Tab para acessar o campo e verificar se o elemento em foco está visível. O rótulo é o nome do controle, não apenas um texto decorativo. A tecnologia assistiva deve ser capaz de identificar qual campo está em foco.
Os atributos id e name têm a mesma função?
O atributo id identifica um elemento no documento e pode vinculá-lo a um rótulo, fragmento ou script. name é a chave usada quando o formulário envia o valor. Aqui, visitor-name é o alvo do rótulo, enquanto name é a chave de submissão. Inspecione os nomes enviados e os métodos de requisição com o exercício de lista de dados em Estrutura do formulário e GET vs. POST.
Se clicar no rótulo não fizer nada, compare for com id. Se a entrada funcionar, mas a URL submetida não contiver o valor, verifique name. Você pode alterar id="visitor-name" para id="person-name" contanto que atualize o for do rótulo; name="name" pode permanecer o mesmo se o servidor ainda esperar por essa chave.
Corrigir um rótulo desconectado
<!-- Incorreto: for corresponde a name em vez de id -->
<label for="full_name">Nome</label>
<input id="person-name" name="full_name">
<!-- Correto: for corresponde ao identificador do campo -->
<label for="person-name">Nome</label>
<input id="person-name" name="full_name">Teste os fragmentos em arquivos separados. Na versão corrigida, clicar no Nome deve colocar o foco em person-name, enquanto a chave enviada permanece full_name. Não combine os dois exemplos em um único documento: fazê-lo duplica o ID e invalida a comparação.
Um texto indicativo não substitui um rótulo
Um placeholder oferece uma dica ou exemplo curto e desaparece quando o usuário digita. Ele não pode substituir um nome de campo persistente. Mantenha um rótulo visível e adicione o exemplo separadamente. Para instruções persistentes associadas a um campo, veja Adicionar um texto indicativo aos campos do formulário.
<label for="email">Endereço de e-mail</label>
<input id="email" name="email" type="email"
placeholder="nome@example.com">Mesmo que um design oculte visualmente um rótulo, o campo ainda deve ter um nome acessível. As caixas de seleção e os botões de opção também podem ser incorporados em um rótulo, como em <label><input type="checkbox" name="agree"> Concordo</label>. Clique no texto do rótulo para verificar se a caixa de seleção muda de estado. Escolha formulações claras antes de ajustar a aparência. Veja a referência MDN sobre rótulos para os métodos de associação.
