Artigos HTML e CSS HTML Label: aplicando rótulos com o uso da tag label

<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"/>
Código 1. Exemplo do uso de label

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">
Código 2. Exemplo simples do uso da tag label

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>
Código 3. Exemplo de label em um formulário

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>
Código 4. Solução para o Exemplo 2

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>
Código 5. Uso de label com 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