Etiqueta <label> de HTML

Definição e uso

<label> O rótulo define uma anotação (marcador) para o elemento input.

O elemento label não apresenta efeitos especiais para o usuário. No entanto, ele melhora a acessibilidade para usuários de mouse. Se você clicar no texto dentro do elemento label, isso acionará este controle. Isso significa que, quando o usuário selecionar este rótulo, o navegador transferirá automaticamente o foco para o controle de formulário relacionado ao rótulo.

<label> do rótulo atributo for deve ser o mesmo que o atributo id do elemento relacionado.

<label> O rótulo pode definir rótulos (marcadores) para vários elementos:

Usar o elemento mencionado acima com o rótulo de maneira correta será benéfico para os seguintes usuários:

  • usuários de leitores de tela (quando o usuário se concentra no elemento, ele lê o rótulo)
  • difficult for users to click on very small areas (such as checkboxes) - because when the user clicks <label> O texto dentro do elemento alternará o campo de entrada (isto aumenta a área de clique)

Veja também:

Manual de referência do HTML DOM:Objeto Label

Exemplo

Três botões de rádio com rótulo:

<form action="/action_page.php">
  <input type="radio" id="html" name="fav_language" value="HTML">
  <label for="html">HTML</label><br>
  <input type="radio" id="css" name="fav_language" value="CSS">
  <label for="css">CSS</label><br>
  <input type="radio" id="javascript" name="fav_language" value="JavaScript">
  <label for="javascript">JavaScript</label><br><br>
  <input type="submit" value="Enviar">
</form>

Experimente você mesmo

Dicas e comentários

Dica:<label> A propriedade for deve ser igual à propriedade id do elemento relacionado para que possam ser vinculados juntos. Também pode ser feito colocando o elemento dentro <label> O rótulo é vinculado ao elemento dentro do elemento.

Atributo

Atributo Valor Descrição
for ID do elemento Define o elemento ao qual o rótulo está vinculado.
form ID do formulário Define o campo do rótulo pertencente ao formulário.

Propriedades globais

<label> O rótulo ainda suporta Propriedades globais no HTML.

Propriedades de eventos

<label> O rótulo ainda suporta Propriedades de eventos no HTML.

Configurações CSS padrão

A maioria dos navegadores usará os seguintes valores padrão para exibir <label> Elemento:

label {
  cursor: default;
}

Experimente você mesmo

Suporte do navegador

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
Suporte Suporte Suporte Suporte Suporte