Tag <label>
A tag <label> fornece rótulos descritivos para os elementos do formulário, sendo fundamental para melhorar a acessibilidade e semântica do mesmo. Ela é frequentemente associada a campos de entrada, como “input”, <select>, e <textarea>, estabelecendo uma conexão entre o rótulo e o elemento correspondente do formulário.
Atributos
Atributo for
O atributo for é essencial na tag <label>. Ele associa o rótulo ao elemento de formulário usando o valor do atributo id do elemento de formulário como argumento. Isso cria uma relação explícita entre o rótulo e o campo de entrada, o que é especialmente útil para usuários de leitores de tela.
<label for="nome">Nome:</label>
<input type="text" id="nome" name="nome">Nota
Ao clicar no rótulo, o campo de entrada correspondente recebe foco, o que é benéfico para usuários que podem ter dificuldade em clicar diretamente em campos pequenos.
Exemplo
<label for="email">Endereço de E-mail:</label>
<input type="email" id="email" name="email">Neste exemplo, o atributo for no <label> faz referência ao atributo id do campo de entrada correspondente, estabelecendo a conexão entre eles.