Label para Elemento de Input

O elemento <label> é usado para associar um rótulo a um campo de entrada em um formulário. Essa associação ajuda os usuários a entender a informação que está sendo solicitada no campo do formulário. Quando um usuário clica no rótulo, ele automaticamente foca no campo de entrada correspondente.

Existem duas maneiras de conectar rótulos e elementos de entrada:

Agrupamento

Ao aninhar um elemento de formulário, como um campo <input/>, dentro de um elemento <label>, o navegador automaticamente estabelece uma ligação entre o rótulo e o campo de entrada. Por exemplo:

Neste exemplo, clicar no texto do rótulo "Name" irá automaticamente focar no campo de entrada correspondente.

Utilizando o atributo id

Quando um elemento de formulário não está aninhado dentro de um elemento <label>, nós os vinculamos manualmente usando o atributo id do elemento input e o atributo for de label. O valor do atributo for e do atributo id deve ser o mesmo. Por exemplo:

Neste caso, o rótulo está associado ao campo de entrada utilizando o atributo for em label e o atributo id em input. Clicar no texto do rótulo "Name" também fará foco no campo de entrada correspondente.

Nota

Ao usar estes métodos, estabelecemos uma conexão visual e semântica entre a label e input. No entanto, pode haver situações em que envolver o elemento input dentro de label é impossível devido a restrições de estilização ou lógica do site. Nestes casos, geralmente confiamos em conexões de atributos para manter a flexibilidade na aplicação de estilos e na implementação da lógica de fundo.

Mais uma vez, vamos examinar a diferença entre as duas abordagens inspecionando o código na imagem.

Nota

Do ponto de vista do navegador, a abordagem escolhida para estabelecer a conexão é irrelevante. Ambos os métodos alcançam o mesmo resultado de vincular o rótulo e o campo de entrada para melhorar a usabilidade e a acessibilidade.