Usando Rótulos para Melhor Acessibilidade em Formulários
Deslize para mostrar o menu
O elemento <label> é utilizado para associar um rótulo a um campo de entrada em um formulário. Essa associação ajuda os usuários a entenderem quais informações estão sendo solicitadas no campo do formulário. Quando o usuário clica no rótulo, o foco é automaticamente direcionado para o campo de entrada correspondente.
Existem duas maneiras de conectar elementos label e input:
Envolvendo
Você pode aninhar um <input> dentro de um <label>, e o navegador fará a ligação automaticamente.
index.html
Clicar em "Nome" foca o campo de entrada.
Usando o atributo id
Se o campo de entrada não puder ser colocado dentro do label, conecte-os manualmente:
index.html
Aqui, o label usa for="name" e o campo de entrada usa id="name". Valores correspondentes criam a conexão.
Usando esses métodos, estabelece-se uma conexão visual e semântica entre o campo label e o campo input. No entanto, pode haver situações em que envolver o elemento input dentro do label seja impossí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.
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 ao campo de entrada para melhor usabilidade e acessibilidade.
Obrigado pelo seu feedback!
Pergunte à IA
Pergunte à IA
Pergunte o que quiser ou experimente uma das perguntas sugeridas para iniciar nosso bate-papo
