Conteúdo do Curso
HTML Definitivo
HTML Definitivo
Usando Rótulos para Melhor Acessibilidade de Formulários
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:
index.html
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:
index.html
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 campoinput
. No entanto, podem existir situações em que envolver o elementoinput
dentro dolabel
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.
Obrigado pelo seu feedback!