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

Nesta documentação você aprenderá o que é o elemento HTML Label, como aplicá-lo em conjunto com outros elementos HTML e como ele pode ser utilizado para melhorar a acessibilidade da interface do usuário.

<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:

O uso adequado de rótulos com os elementos acima beneficiará:

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
See the Pen HTML Label - Exemplo 1 by Wladimir Batista Castro (@wladimirrj) on CodePen.

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
See the Pen HTML Label - Exemplo 2 by Wladimir Batista Castro (@wladimirrj) on CodePen.

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
See the Pen HTML Label - Exemplo 3 by Wladimir Batista Castro (@wladimirrj) on CodePen.

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
See the Pen HTML Label - Exemplo 4 by Wladimir Batista Castro (@wladimirrj) on CodePen.

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

Artigos relacionados