Tag HTML <legend>
A tag <legend> define a legenda para controles de formulário agrupados pelo <fieldset>. Regras de posicionamento, acessibilidade e exemplos.
A tag <legend> define a legenda para um grupo de controles de formulário envolvidos por um elemento <fieldset>. No navegador, o fieldset é desenhado como uma caixa com borda, e a legenda é renderizada sobrepondo a borda superior desse quadro. Agrupar controles relacionados dentro de um <form> com <fieldset> e uma legenda <legend> torna formulários complexos mais fáceis de percorrer e muito mais acessíveis.
Esta página aborda as regras corretas de posicionamento para <legend> , como a tecnologia assistiva a utiliza, como configurar pares acessíveis de label/input e como lidar com casos do mundo real, como um formulário dividido em várias seções.
Por que <legend> deve ser o primeiro filho de <fieldset>
A especificação HTML exige que o <legend> seja o primeiro filho do seu <fieldset> . Isso não é apenas uma convenção de estilo:
- A renderização depende disso. O navegador posiciona a legenda na borda superior do quadro do fieldset. Se a legenda não estiver em primeiro lugar, ela perde esse posicionamento especial e a caixa é renderizada incorretamente.
- A árvore de acessibilidade depende disso. Os navegadores mapeiam o primeiro
<legend>
Um <fieldset> pode conter apenas um <legend> , e ele deve vir antes de qualquer controle. Se você precisar de uma segunda legenda, precisará de um segundo <fieldset> .
Acessibilidade: como os leitores de tela usam a legenda
A combinação de <fieldset> e <legend> é a forma padrão de rotular um grupo de controles (o exemplo clássico é um conjunto de botões de rádio que compartilham uma mesma pergunta).
Quando um leitor de tela move o foco para qualquer controle dentro do fieldset, ele anuncia o texto da legenda como um prefixo para o próprio rótulo daquele controle. Por exemplo, com uma legenda Endereço de entrega e um campo rotulado Cidade, o leitor de tela lê aproximadamente "Endereço de entrega, Cidade, editar texto." Isso informa ao usuário a qual seção cada campo pertence, sem que ele precise navegar para fora do grupo. Texto simples como Nome: posicionado livremente ao lado de um input não é um rótulo programático e, portanto, não fornece esse contexto — sempre associe cada controle a um <label> real.
Sintaxe
A tag <legend> é usada em pares. O texto da legenda é escrito entre as tags de abertura <legend> e de fechamento </legend> , e deve ser o primeiro elemento dentro do <fieldset> .
Exemplo da tag HTML <legend> :
O exemplo abaixo modela uma marcação acessível: cada controle tem um id, e cada <label> aponta para ele com um atributo for correspondente. Clicar em um label move o foco para o input correspondente, e os leitores de tela leem a legenda junto com o label.
Tag HTML <legend>
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<form>
<fieldset>
<legend>Personal data:</legend>
<label for="name">Name:</label>
<input type="text" id="name" name="name" />
<br>
<br>
<label for="email">E-mail:</label>
<input type="email" id="email" name="email" />
<br>
<br>
<label for="dob">Date of birth:</label>
<input type="date" id="dob" name="dob" />
<br>
<br>
<label for="pob">Place of birth:</label>
<input type="text" id="pob" name="pob" />
</fieldset>
</form>
</body>
</html>Resultado
Exemplo da tag HTML <legend> com CSS:
Exemplo da tag <legend> com propriedades CSS:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
form {
width: 55%;
}
fieldset {
padding: 25px;
}
label {
display: inline-block;
width: 95px;
text-align: right;
}
legend {
display: block;
padding: 15px;
margin-bottom: 10px;
background-color: #cccccc;
color: #777777;
}
</style>
</head>
<body>
<form>
<fieldset>
<legend>Personal data:</legend>
<label for="name">Name:</label>
<input type="text" id="name" name="name" />
<br>
<br>
<label for="email">E-mail:</label>
<input type="email" id="email" name="email" />
<br>
<br>
<label for="dob">Date of birth:</label>
<input type="date" id="dob" name="dob" />
<br>
<br>
<label for="pob">Place of birth:</label>
<input type="text" id="pob" name="pob" />
</fieldset>
</form>
</body>
</html>Exemplo com múltiplos fieldsets e legends:
Formulários reais geralmente são divididos em vários grupos — por exemplo, um formulário de checkout com seções separadas de entrega e cobrança. Cada grupo tem seu próprio <fieldset> e seu próprio <legend> . Um leitor de tela então adiciona o nome correto da seção como prefixo de cada campo, de modo que o usuário sempre sabe se está editando o endereço de entrega ou o de cobrança.
Formulário com grupos de entrega e cobrança
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<form>
<fieldset>
<legend>Shipping address</legend>
<label for="ship-name">Full name:</label>
<input type="text" id="ship-name" name="ship-name" />
<br>
<br>
<label for="ship-city">City:</label>
<input type="text" id="ship-city" name="ship-city" />
</fieldset>
<fieldset>
<legend>Billing address</legend>
<label for="bill-name">Full name:</label>
<input type="text" id="bill-name" name="bill-name" />
<br>
<br>
<label for="bill-city">City:</label>
<input type="text" id="bill-city" name="bill-city" />
</fieldset>
</form>
</body>
</html>Um fieldset e legend também são a forma recomendada de rotular um conjunto de botões de rádio, onde a legenda faz a pergunta e cada botão de rádio tem seu próprio label:
<form>
<fieldset>
<legend>Choose a shipping speed</legend>
<label for="standard">Standard (5–7 days)</label>
<input type="radio" id="standard" name="speed" value="standard" />
<br>
<label for="express">Express (1–2 days)</label>
<input type="radio" id="express" name="speed" value="express" />
</fieldset>
</form>Atributos
| Atributo | Valor | Descrição |
|---|---|---|
| align | left right center justify | Definia o alinhamento horizontal da legenda em relação ao fieldset. Obsoleto — removido do HTML5; use CSS em vez disso. |
A tag <legend> suporta os Atributos Globais e os Atributos de Evento.
Substituindo o atributo align obsoleto
O antigo atributo align="center" não funciona mais de forma confiável e não deve ser usado. O equivalente em CSS é text-align no próprio elemento <legend> :
/* Old, deprecated: <legend align="center"> */
/* Modern replacement: */
legend {
text-align: center;
}Particularidades de posicionamento a conhecer:
- Por padrão, a legenda fica sobre a borda superior do fieldset, próxima à borda esquerda. Os navegadores reservam para a legenda uma posição especial no layout, de modo que ela não se comporta como uma caixa de nível de bloco normal.
text-alignmove a legenda horizontalmente dentro do espaço que o navegador reserva para ela — os resultados variam entre navegadores, portanto teste nos navegadores de destino.- Para um controle preciso, você pode substituir o posicionamento padrão com
positione deslocamentos, ou usarpadding/marginpara ajustar o texto. Definirwidthna legenda permite alinhá-la da forma quealign="justify"costumava implicar.
Como estilizar uma tag HTML <legend>
Você pode estilizar o elemento <legend> usando propriedades CSS padrão como padding, margin, background-color, text-align e font-weight, conforme demonstrado no exemplo CSS acima.