<label>: Elemento LABEL
Última atualização: 2026-10-13
<label>Elemento LABEL
O elemento <label> define um rótulo para um controle de formulário. O atributo for o vincula ao id do controle; clicar no rótulo foca/ativa o controle, melhorando acessibilidade e experiência de toque.
| Categoria | Formulários |
|---|---|
| Modelo de Conteúdo | Conteúdo de frase (sem <label> aninhado) |
| Pais Permitidos | Qualquer elemento que aceite conteúdo de frase |
| Tag de Fechamento | Sim — requer fechamento </label> tag |
| Status | Padrão |
📝 Sintaxe
<label for="username">Usuário:</label>
<input type="text" id="username">
⚙️ Atributos
Este elemento suporta os atributos globais mais os seguintes:
| Atributo | Valor | Descrição |
|---|---|---|
for | Element ID | The ID of the associated form control. |
▶ Exemplo
Edite o código abaixo e veja o resultado em tempo real no playground:
🌐 Suporte de Navegadores
| Navegador | |||||
|---|---|---|---|---|---|
| <label> | ✓ v1 | ✓ v12 | ✓ v1 | ✓ v1 | ✓ v1 |
| Suportado em todos os navegadores principais | |||||
❓ Perguntas Frequentes
QPara que serve o atributo for de label?
A
for aponta para o id do campo, criando a associação explícita: clicar no texto do label foca/seleciona o campo, e o leitor de tela lê o label como nome do campo. Escrita: <label for='email'>E-mail</label><input id='email'>.QEnvolvendo o input no label, dispensa-se o for?
ASim. Com o controle dentro do label, a associação é implícita e não precisa de for nem id; mas um label só pode envolver um controle. A associação implícita atrapalha layouts complexos (label e controle costumam ficar separados); o for explícito é mais flexível — não misture as duas formas no mesmo controle.
Qlabel pode conter títulos ou links?
ANão deve conter títulos (h1-h6) nem elementos interativos (links, botões). A semântica de label é «nome do controle»; aninhar interativos gera conflito de clique e leitura confusa no leitor de tela. Notas auxiliares ficam fora do label ou ligadas por aria-describedby.