Docs executáveis de HTML: Label no HTML

Q: O que é o atributo for num label?

for guarda o id do campo a que o label pertence: Email . Ele precisa ser exatamente igual ao id, não ao name.

Q: Como esconder um label mas mantê-lo para leitores de tela?

Mantenha o e esconda-o visualmente com uma classe que o reduz a 1 pixel e o recorta, em vez de display: none, que o esconde também dos leitores de tela. Para um campo sem espaço para label nenhum, aria-label no campo é a alternativa.

O que o elemento label faz

<label> dá nome a um campo de formulário. Ligue-o com for, definido com o id do campo, e duas coisas acontecem: os leitores de tela anunciam o label quando o campo recebe foco, e clicar no texto do label coloca o foco no campo. Clique nos dois textos abaixo:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Label</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    p { margin: 0 0 12px; }
  </style>
</head>
<body>
  <p>
    <label for="city">City (a label)</label>
    <input id="city" name="city">
  </p>
  <p>
    <span>Country (plain text)</span>
    <input name="country">
  </p>
</body>
</html>

Clicar em "City" coloca o cursor no seu campo. Clicar em "Country" não faz nada, e um leitor de tela que foca esse segundo campo ouve só "editar texto", sem nome. Os dois parecem idênticos; só um tem label.

Duas formas de ligar um label

Use for e id, ou coloque o campo dentro do label:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>for vs wrapping</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    .row { margin-bottom: 12px; }
    label { font-weight: 600; }
  </style>
</head>
<body>
  <form>
    <!-- 1. for + id: label and field can be anywhere -->
    <div class="row">
      <label for="email">Email</label><br>
      <input type="email" id="email" name="email">
    </div>

    <!-- 2. wrapping: no id needed -->
    <div class="row">
      <label>Phone <input type="tel" name="phone"></label>
    </div>

    <button type="submit">Save</button>
  </form>
</body>
</html>

	`for` e `id`	Envolvendo
Precisa de um `id`	Sim, único na página	Não
Label e campo podem ficar separados	Sim (uma célula de tabela, um grid)	Não, o campo fica dentro
Fácil de quebrar	Por um erro de digitação ou um `id` duplicado	Colocando dois campos num label

for precisa corresponder ao id do campo, não ao seu name. Os dois costumam ser a mesma palavra, o que esconde o erro até alguém mudar um deles. Fazer as duas coisas (envolver e usar for) não tem problema e é comum.

Um label pode ser ligado a <input> (menos type="hidden"), <select>, <textarea>, <button>, <meter>, <output> e <progress>. Um label nomeia um campo. Um campo pode ter mais de um label, embora um label claro seja mais fácil para todo mundo.

Uma área de clique maior em checkboxes e radios

Nos controles pequenos o label faz mais diferença: clicar em qualquer parte dele alterna a caixa, então o alvo é a linha inteira de texto, não um quadradinho de 13 pixels. Estilizar o label pode aumentar ainda mais o alvo:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Click target</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    .option {
      display: flex;
      align-items: center;
      gap: 10px;
      max-width: 320px;
      padding: 12px;
      margin-bottom: 8px;
      border: 1px solid #e5e7eb;
      border-radius: 8px;
      cursor: pointer;
    }
    .option:hover { border-color: #2563eb; }
  </style>
</head>
<body>
  <form>
    <label class="option">
      <input type="checkbox" name="alerts" value="email"> Email me about new courses
    </label>
    <span class="option">
      <input type="checkbox" name="alerts" value="sms"> Not a label: only the box works
    </span>
    <button type="submit">Save</button>
  </form>
</body>
</html>

Clique no padding de cada linha, longe da caixa. A primeira linha alterna; a segunda não faz nada a não ser que você acerte a própria caixa. Mais sobre checkboxes em checkbox no HTML.

Dicas e mensagens de erro

Um label deve ser curto: o nome do campo. Instruções extras e mensagens de erro vão em elementos separados, ligados com aria-describedby, para que os leitores de tela leiam o label primeiro e a descrição depois:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Hints and errors</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    label { display: block; font-weight: 600; }
    .hint { display: block; color: #4b5563; font-size: 14px; margin: 2px 0 6px; }
    .error { color: #b91c1c; font-size: 14px; margin: 4px 0 0; }
    input { font: inherit; padding: 4px 8px; }
    .req { color: #b91c1c; }
  </style>
</head>
<body>
  <form novalidate>
    <label for="user">Username <span class="req" aria-hidden="true">*</span></label>
    <span class="hint" id="user-hint">3 to 16 lowercase letters or digits</span>
    <input id="user" name="username" required pattern="[a-z0-9]{3,16}"
      aria-describedby="user-hint user-error">
    <p class="error" id="user-error"></p>
    <button type="submit">Create</button>
  </form>

  <script>
    const form = document.querySelector('form');
    const user = document.querySelector('#user');
    form.addEventListener('submit', (event) => {
      const error = document.querySelector('#user-error');
      if (!user.checkValidity()) {
        event.preventDefault();
        error.textContent = user.value ? 'Use 3 to 16 lowercase letters or digits.' : 'Enter a username.';
        user.setAttribute('aria-invalid', 'true');
        user.focus();
      } else {
        error.textContent = '';
        user.removeAttribute('aria-invalid');
      }
    });
  </script>
</body>
</html>

Aperte Create com o campo vazio, depois com AB, depois com ada99. Com aria-describedby, um leitor de tela anuncia algo como "Username, obrigatório, editar texto, 3 to 16 lowercase letters or digits, Enter a username." O asterisco tem aria-hidden porque o atributo required já diz "obrigatório"; ouvir "asterisco" não acrescenta nada.

Labels ocultos

Alguns campos têm uma indicação visível que não é um label de texto, como uma caixa de busca ao lado de um botão Search. O label continua sendo necessário; esconda-o visualmente, mas mantenha-o na página para os leitores de tela:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Hidden label</title>
  <style>
    .visually-hidden {
      position: absolute;
      width: 1px;
      height: 1px;
      overflow: hidden;
      clip-path: inset(50%);
      white-space: nowrap;
    }
    input, button { font: inherit; padding: 6px 10px; }
  </style>
</head>
<body>
  <form role="search">
    <label for="q" class="visually-hidden">Search courses</label>
    <input type="search" id="q" name="q" placeholder="e.g. Python">
    <button type="submit">Search</button>
  </form>
</body>
</html>

Não esconda com display: none nem visibility: hidden: eles o escondem também dos leitores de tela, e nem todo navegador e leitor de tela ainda usa um label oculto como nome. A outra opção é aria-label="Search courses" no input, que o nomeia sem nenhum elemento label. Um label visível continua sendo a melhor escolha sempre que houver espaço: todo mundo se beneficia de ver para que serve um campo.

Erros comuns

for apontando para o name em vez do id. Nada se liga.
Ids duplicados. for se liga ao primeiro elemento com esse id, que pode ser um campo de outro formulário da página.
Placeholder no lugar de label. Some ao digitar e não é um nome confiável.
Dois campos dentro de um label. Um label nomeia um campo; o segundo fica sem label.
Um link dentro do label de uma checkbox, como "Eu aceito os termos" com "termos" como link. Parte da linha alterna a caixa e parte abre uma página, o que é fácil de acertar sem querer. Coloque o link fora do label.
Esconder o label com display: none. Use uma classe de ocultação visual.
Texto ao lado de um campo que não é um <label>. Parece igual e não faz nada. Para o formulário em volta dos seus campos, veja formulários HTML.

Perguntas frequentes

O que a tag label faz no HTML?

Ela dá nome a um campo de formulário. Os leitores de tela leem o label quando o campo recebe foco, e clicar no label coloca o foco no campo, ou o alterna no caso de uma checkbox ou radio button.

O que é o atributo for num label?

for guarda o id do campo a que o label pertence: <label for="email">Email</label> <input id="email">. Ele precisa ser exatamente igual ao id, não ao name.

Coloco o input dentro do label ou uso for?

Os dois funcionam nos navegadores e leitores de tela atuais. Envolver dispensa ids; for e id permitem que o label e o campo fiquem em lugares diferentes da marcação, como células de tabela separadas. Muitas equipes envolvem e adicionam for também.

Um placeholder pode substituir um label?

Não. O placeholder some assim que o usuário digita, costuma ter pouco contraste e não é anunciado de forma confiável como o nome do campo. Use um <label> visível e deixe o placeholder para um valor de exemplo, se for usar.

Como esconder um label mas mantê-lo para leitores de tela?

Mantenha o <label> e esconda-o visualmente com uma classe que o reduz a 1 pixel e o recorta, em vez de display: none, que o esconde também dos leitores de tela. Para um campo sem espaço para label nenhum, aria-label no campo é a alternativa.

Conceitos relacionados