Tag HTML <legend>
Il tag <legend> imposta la didascalia per un gruppo di controlli di modulo definiti dal tag <fieldset>. Regole di posizionamento, accessibilità, attributi ed esempi.
Il tag <legend> definisce la didascalia per un gruppo di controlli di modulo racchiusi in un elemento <fieldset>. Nel browser, il fieldset viene disegnato come una casella con cornice e la didascalia del legend viene renderizzata sovrapposta al bordo superiore di quella cornice. Raggruppare i controlli correlati all'interno di un <form> con <fieldset> e una didascalia <legend> rende i moduli complessi più facili da scorrere e molto più accessibili.
Questa pagina tratta le regole di posizionamento corrette per <legend> , come la tecnologia assistiva lo utilizza, come configurare coppie label/input accessibili e come gestire i casi reali come un modulo suddiviso in più sezioni.
Perché <legend> deve essere il primo figlio di <fieldset>
La specifica HTML richiede che <legend> sia il primo figlio del suo <fieldset> . Questa non è solo una convenzione di stile:
- Il rendering dipende da ciò. Il browser posiziona il legend sul bordo superiore della cornice del fieldset. Se il legend non è il primo, perde quel posizionamento speciale e la casella viene renderizzata in modo errato.
- L'albero di accessibilità dipende da ciò. I browser mappano il primo
<legend>
Un <fieldset> può contenere un solo <legend> , e deve precedere qualsiasi controllo. Se è necessaria una seconda didascalia, occorre un secondo <fieldset> .
Accessibilità: come gli screen reader utilizzano il legend
La combinazione di <fieldset> e <legend> è il metodo standard per etichettare un gruppo di controlli (l'esempio classico è un insieme di pulsanti radio che condividono una domanda).
Quando uno screen reader sposta il focus su qualsiasi controllo all'interno del fieldset, annuncia il testo del legend come prefisso all'etichetta propria di quel controllo. Ad esempio, con un legend Indirizzo di spedizione e un campo etichettato Città, lo screen reader legge all'incirca "Indirizzo di spedizione, Città, campo di testo." Questo indica all'utente a quale sezione appartiene ogni campo senza dover uscire dal gruppo. Il testo semplice come Nome: posizionato liberamente accanto a un input non è un'etichetta programmatica e non fornisce tale contesto — associare sempre ogni controllo a un vero <label>.
Sintassi
Il tag <legend> viene utilizzato in coppia. Il testo della didascalia viene scritto tra il tag di apertura <legend> e il tag di chiusura </legend> , e deve essere il primo elemento all'interno del <fieldset> .
Esempio del tag HTML <legend> :
L'esempio seguente mostra un markup accessibile: ogni controllo ha un id, e ogni <label> vi punta tramite un attributo for corrispondente. Fare clic su un'etichetta porta il focus al relativo input, e gli screen reader leggono insieme il legend e l'etichetta.
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>Risultato
Esempio del tag HTML <legend> con CSS:
Esempio del tag <legend> con proprietà 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>Esempio con più fieldset e legend:
I moduli reali sono solitamente suddivisi in più gruppi — ad esempio, un modulo di checkout con sezioni separate per la spedizione e la fatturazione. Ogni gruppo riceve il proprio <fieldset> e il proprio <legend> . Uno screen reader prefissa poi ogni campo con il nome della sezione corretta, così l'utente sa sempre se sta modificando l'indirizzo di spedizione o quello di fatturazione.
Modulo con gruppi spedizione e fatturazione
<!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>Un fieldset e un legend sono anche il metodo consigliato per etichettare un insieme di pulsanti radio, dove il legend pone la domanda e ogni pulsante radio ha la propria etichetta:
<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>Attributi
| Attributo | Valore | Descrizione |
|---|---|---|
| align | left right center justify | Definiva l'allineamento orizzontale della didascalia rispetto al fieldset. Deprecato — rimosso da HTML5; usare CSS invece. |
Il tag <legend> supporta gli Attributi Globali e gli Attributi Evento.
Sostituzione dell'attributo align deprecato
Il vecchio attributo align="center" non funziona più in modo affidabile e non dovrebbe essere utilizzato. L'equivalente CSS è text-align sul tag <legend> stesso:
/* Old, deprecated: <legend align="center"> */
/* Modern replacement: */
legend {
text-align: center;
}Particolarità di posizionamento da conoscere:
- Per impostazione predefinita il legend si trova sul bordo superiore del fieldset, vicino al bordo sinistro. I browser riservano al legend una posizione speciale nel layout, quindi non si comporta come un normale elemento a livello di blocco.
text-alignsposta la didascalia orizzontalmente all'interno dello spazio assegnato dal browser — i risultati variano tra i browser, quindi è necessario testare sui browser di destinazione.- Per un controllo preciso è possibile sovrascrivere il posizionamento predefinito con
positione offset, oppure usarepadding/marginper spostare il testo. Impostarewidthsul legend consente di allinearlo nel modo in cuialign="justify"implicava un tempo.
Come applicare stili a un tag HTML <legend>
È possibile applicare stili all'elemento <legend> usando le proprietà CSS standard come padding, margin, background-color, text-align e font-weight, come dimostrato nell'esempio CSS sopra.