Tag HTML <label>

A tag HTML <label> define uma legenda para um controle de formulário, como um <input>, <select> ou <textarea>. O label e o controle são vinculados, para que o navegador saiba que o texto pertence àquele campo específico.

Esta página aborda as duas formas de associar um label a um controle, por que os labels são importantes para acessibilidade e usabilidade, e como <label> se compara aos atributos de rotulagem ARIA e ao placeholder.

Por que os labels são importantes

Um label não é apenas texto visível ao lado de um campo — ele está programaticamente vinculado a um controle. Essa associação proporciona três benefícios concretos:

Acessibilidade. Quando o controle recebe foco, um leitor de tela anuncia o seu label, para que o usuário saiba o que digitar. Sem um label, o campo é anunciado apenas pelo tipo (por exemplo, "caixa de texto") sem contexto.
Uma área de clique maior. Clicar ou tocar no label foca (e, para checkboxes/botões de rádio, alterna) o controle. Isso é especialmente valioso para checkboxes e botões de rádio pequenos, onde a caixa em si é difícil de acertar com precisão em telas sensíveis ao toque.
Melhor usabilidade. Os usuários entendem imediatamente qual legenda pertence a qual campo, reduzindo erros no formulário.

As duas formas de associar um label

Existem duas formas de conectar um <label> ao seu controle: associação explícita com o atributo for, e associação implícita envolvendo o controle.

Associação explícita (`for` + `id`)

Atribua um id ao controle e defina o atributo for do label com o mesmo valor. O valor de for deve corresponder exatamente ao id do controle, e o id deve existir no documento.

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <form>
      <label for="lfname">First name:</label>
      <input id="lfname" name="fname" type="text" />
    </form>
  </body>
</html>

Experimente Você Mesmo »

A rotulagem explícita é a abordagem mais flexível: o label e o controle podem estar em qualquer lugar na marcação, o que é útil quando o layout (por exemplo, um CSS grid ou uma tabela) separa a legenda do campo.

Associação implícita (envolvendo o controle)

Coloque o controle dentro do elemento <label>. Nenhum par id/for é necessário — o aninhamento cria a associação automaticamente.

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <form>
      <label>Name
        <input name="Name" type="text" />
      </label>
    </form>
  </body>
</html>

Experimente Você Mesmo »

Ambos os métodos produzem o mesmo resultado. Envolver é conciso e garante a associação mesmo que você esqueça um id; o for explícito é a escolha quando a estrutura da marcação mantém o label e o controle separados.

Regras e armadilhas

Um controle por label. Um único <label> está associado a exatamente um controle de formulário. Se você envolver dois inputs em um label, apenas o primeiro será associado.
Um controle pode ter vários labels. O mesmo input pode ser referenciado por mais de um <label for="...">, e todos eles vão focar ou alternar o controle ao serem clicados.
for deve apontar para um id real. Se o valor de for não corresponder a um id existente, a associação falha silenciosamente — o label se torna texto simples.
Apenas controles de formulário podem receber labels. <label> pode legendar <input> (exceto type="hidden"), <button>, <meter>, <output>, <progress>, <select> e <textarea>. Ele não rotula um <div>, <span> ou cabeçalho.
Evite conteúdo interativo dentro de um label. Não coloque outro controle (um segundo input, um botão ou um link) dentro de um <label>, pois ele compete com o controle rotulado pelos cliques.

Checkboxes e botões de rádio

Os labels são mais importantes aqui, porque a caixa clicável é pequena. Com um label adequado, toda a legenda se torna parte da área de clique.

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <form>
      <label for="barca">Barcelona</label>
      <input type="radio" name="team" id="barca" value="Barcelona" />
      <br />
      <label for="real">Real Madrid</label>
      <input type="radio" name="team" id="real" value="Real Madrid" />
      <br />
    </form>
  </body>
</html>

Experimente Você Mesmo »

Rotulagem sem um `<label>` visível: ARIA e `placeholder`

Às vezes, um label visível não se encaixa no design. Um <label> visível ainda deve ser o padrão — beneficia todos os usuários, não apenas os usuários de leitores de tela — mas as seguintes opções existem para as exceções.

`aria-label`

Use aria-label para fornecer um nome acessível diretamente no controle quando não há texto visível para referenciar (por exemplo, um campo de pesquisa com apenas um ícone de lupa).

<input type="search" aria-label="Search the site" />

`aria-labelledby`

Use aria-labelledby quando o texto de nomeação já existe em outro lugar na página. Ele referencia um ou mais ids de elementos e, ao contrário de for, permite construir um label a partir de vários trechos de texto.

<span id="billing">Billing</span>
<span id="name">Name</span>
<input type="text" aria-labelledby="billing name" />

Quando um <label> e aria-labelledby estão presentes ao mesmo tempo, aria-labelledby tem precedência.

`placeholder` não é um label

Um placeholder é um texto de exemplo, não um label. Ele desaparece assim que o usuário começa a digitar, oferece baixo contraste de cor na maioria dos navegadores e não é anunciado de forma confiável como o nome do campo por tecnologias assistivas. Sempre associe um input a um <label> real — nunca dependa apenas do placeholder.

<!-- Not accessible: no label, only a placeholder -->
<input type="email" placeholder="Email" />

<!-- Accessible: real label, placeholder is an optional hint -->
<label for="email">Email</label>
<input id="email" type="email" placeholder="[email protected]" />

Exemplo da tag HTML `<label>` com propriedades de fonte CSS:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      body {
       padding: 20px;
      }
      label {
        font-size: 20px;
        font-weight: 700;
        color: #1c87c9;
      }
      input {
        width: 50%;
        height: 28px;
        padding: 4px 10px;
        border: 1px solid #666;
        background: #cce6ff;
        color: #1c87c9;
        font-size: 16px;
      }
    </style>
  </head>
  <body>
    <form>
      <label for="user">Your Name:</label>
      <input id="user" name="Name" type="text" />
    </form>
  </body>
</html>

Experimente Você Mesmo »

Atributos

Atributo	Valor	Descrição
`accesskey`	`accesskey`	Define um atalho de teclado para focar o elemento de formulário associado (não navega nem salta para ele).
`for`	`element\_id`	Define o ID do elemento ao qual o label deve ser vinculado.
`form`	`form\_id`	Especifica o(s) formulário(s) ao(s) qual(is) o label será associado. Este atributo permite colocar tags em qualquer local do documento, e não apenas como descendente do elemento `<form>`.

O elemento <label> também suporta os Atributos Globais e os Atributos de Evento.

Exemplo do atributo `form`:

O atributo form permite que o label esteja fora do <form> ao qual pertence. O controle ainda usa a associação normal for/id.

<form id="myForm">
  <input id="username" type="text" name="username" />
</form>
<label for="username" form="myForm">Username:</label>

Tópicos relacionados

Tag HTML <input> — o controle mais frequentemente rotulado.
Tag HTML <form> — o contêiner que agrupa labels e controles.
Atributo HTML id — como o vínculo for/id é construído.

Prática

Qual método associa corretamente um label a um input de texto chamado email?

Definir o id do input como email e o atributo for do label como email.Adicionar um placeholder 'Email' ao input em vez de um label.Corresponder o atributo for do label ao atributo name do input.Dar ao label e ao input o mesmo nome de classe.

Por que os labels são importantes

As duas formas de associar um label

Associação explícita (for + id)

Associação implícita (envolvendo o controle)

Regras e armadilhas

Checkboxes e botões de rádio

Rotulagem sem um <label> visível: ARIA e placeholder

aria-label

aria-labelledby

placeholder não é um label

Exemplo da tag HTML <label> com propriedades de fonte CSS:

Atributos

Exemplo do atributo form:

Tópicos relacionados

Prática

Associação explícita (`for` + `id`)

Rotulagem sem um `<label>` visível: ARIA e `placeholder`

`aria-label`

`aria-labelledby`

`placeholder` não é um label

Exemplo da tag HTML `<label>` com propriedades de fonte CSS:

Exemplo do atributo `form`: