<label>
A tag <label> é um elemento HTML que representa uma legenda para melhorar a acessibilidade de um item de interface do usuário.
Este elemento também é conhecido como controle ou rótulo e pode ser associado a outro elemento de controle através de um atributo.
<label>: na prática
<label>Nome:</label>
<input type="text" name="Name"/>
Qual a definição e benefícios de se utilizar rótulos?
A tag <label> define um rótulo para os seguintes elementos:
- <button>
- <input>
- <meter>
- <output>
- <progress>
- <select>
- <textarea>
O uso adequado de rótulos com os elementos acima beneficiará:
- Usuários com qualquer tipo de dificuldade visual (o rótulo será lido em voz alta quando o usuário estiver focado no elemento);
- Usuários que tem dificuldade em clicar em regiões muito pequenas (como caixas de seleção), pois quando um usuário clica no texto dentro do <label> ele alterna a entrada (aumentando a área de acerto).
Sintaxe
<label> form content…</label>Atributos
for
É o atributo de entrada para qual o <label> se destina. Seu valor deve ser igual ao valor do atributo id do elemento controle de entrada (<input>).
form
É o elemento de formulário (<form>) ao qual o <label> fará parte. Este atributo permite que colocar <label> em qualquer lugar dentro de um documento, e não apenas como descendentes de seus elementos de formulário.
Saiba mais: Crie formulários com HTML5
Exemplos de rótulos
Exemplo 1
No exemplo do Código 2 demonstramos a forma mais simples de utilizar a tag <label>.
<label>Nome completo: </label>
<input type="text" name="nome_completo">
Exemplo 2
No exemplo do Código 3 demonstramos o uso da tag <label> dentro de um formulário.
<form action="#" method="post">
<label>Nome completo: </label>
<input type="text" name="nome_completo">
</form>
Note que neste caso, a utilização da label é quase ineficaz, pois ela não ajuda o usuário no preenchimento do formulário. Ele será quase ineficaz porque os robôs de indexação lerão o HTML e saberão que aquele texto refere-se ao rótulo de um input, porém não identificará o input, pois não há nada que relacione tecnicamente o input com o label.
Exemplo 3
Neste exemplo do Código 4 demonstraremos uma solução para o problema do Exemplo 2. Aqui usaremos o atributo for relacionando com um elemento input através de seu ID.
<form action="#" method="post">
<label for="nome_completo">Nome completo: </label>
<input type="text" name="nome_completo" id="nome_completo">
</form>
Note que desta forma, além de deixar claro para os robôs indexadores a correlação entre label e input, você também melhora a experiência do usuário: ao clicar no texto da label, automaticamente o foco é transferido para o input relacionado, ativando o preenchimento pelo cursor no input.
Exemplo 4
Neste exemplo do Código 5 demonstraremos o uso da tag <label> em conjunto com a tag <textarea>.
<label for="story">Conte a sua história:</label>
<textarea id="story" name="story" rows="5" cols="33">
Era um dia quente e ensolarado...
</textarea>
Note que o elemento label terá o valor do atributo for idêntico ao id do elemento textarea.
Compatibilidade com navegadores
O <label> é suportado em todos os navegadores apresentados na tabela abaixo:
| <label> | Chrome | Mozilla Firefox | Edge / IE | Opera | Safari |
| Sim | Sim | Sim | Sim | Sim |
