O elemento <label> é utilizado para associar um rótulo a um campo de entrada em um formulário. Essa associação auxilia os usuários a compreenderem as informações solicitadas no campo do formulário. Ao clicar no rótulo, o foco é automaticamente direcionado para o campo de entrada correspondente.

Existem duas maneiras de conectar elementos label e input:

Envolvimento

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

Neste exemplo, ao clicar no texto do rótulo "Nome", o campo de entrada correspondente será automaticamente focado.

Utilizando o atributo id

Quando um elemento de formulário não está aninhado dentro de um elemento <label>, é necessário vinculá-los manualmente utilizando o atributo id do elemento input e o atributo for do elemento label. Os valores dos atributos for e id devem ser iguais. Por exemplo:

Neste caso, o rótulo está associado ao campo de entrada utilizando o atributo for no rótulo e o atributo id no campo de entrada. Ao clicar no texto do rótulo "Nome", o campo de entrada correspondente também será focado.

Observação

Utilizando esses métodos, estabelece-se uma conexão visual e semântica entre o label e o campo input. No entanto, podem existir situações em que envolver o elemento input dentro do label seja inviável devido a restrições de estilo ou lógica do site. Nesses casos, normalmente utiliza-se a conexão por atributos para manter a flexibilidade na aplicação de estilos e implementação de lógica de fundo.

Vamos analisar a diferença entre as duas abordagens examinando 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 melhor usabilidade e acessibilidade.