La balise HTML <legend>
La balise <legend> définit le titre d'un groupe de contrôles de formulaire dans <fieldset>. Placement, accessibilité, attributs et exemples.
La balise <legend> définit le titre d'un groupe de contrôles de formulaire regroupés dans un élément <fieldset>. Dans le navigateur, le fieldset est dessiné sous la forme d'un cadre, et le titre de la légende est rendu en chevauchant la bordure supérieure de ce cadre. Regrouper des contrôles connexes dans un <form> avec <fieldset> et un titre <legend> rend les formulaires complexes plus faciles à parcourir et bien plus accessibles.
Cette page couvre les règles de placement correctes pour <legend> , la façon dont les technologies d'assistance l'utilisent, comment associer des paires label/input accessibles, et comment gérer des cas concrets tels qu'un formulaire découpé en plusieurs sections.
Pourquoi <legend> doit être le premier enfant de <fieldset>
La spécification HTML exige que <legend> soit le premier enfant de son <fieldset> . Il ne s'agit pas seulement d'une convention de style :
- Le rendu en dépend. Le navigateur positionne la légende sur la bordure supérieure du cadre fieldset. Si la légende n'est pas en premier, elle perd cet emplacement spécial et le cadre s'affiche incorrectement.
- L'arbre d'accessibilité en dépend. Les navigateurs associent le premier
<legend>
Un <fieldset> ne peut contenir qu'un seul <legend> , et celui-ci doit figurer avant tout contrôle. Si vous avez besoin d'un deuxième titre, vous avez besoin d'un deuxième <fieldset> .
Accessibilité : comment les lecteurs d'écran utilisent la légende
La combinaison de <fieldset> et de <legend> est le moyen standard d'étiqueter un groupe de contrôles (l'exemple classique étant un ensemble de boutons radio partageant une même question).
Lorsqu'un lecteur d'écran déplace le focus sur un contrôle à l'intérieur du fieldset, il annonce le texte de la légende comme préfixe à l'étiquette propre de ce contrôle. Par exemple, avec une légende Adresse de livraison et un champ étiqueté Ville, le lecteur d'écran lit approximativement « Adresse de livraison, Ville, zone de texte. » Cela indique à l'utilisateur à quelle section appartient chaque champ sans qu'il ait à naviguer hors du groupe. Un texte brut comme Nom : placé librement à côté d'un input n'est pas une étiquette programmatique et ne fournit aucun contexte — associez toujours chaque contrôle à un vrai <label>.
Syntaxe
La balise <legend> s'utilise par paires. Le texte du titre est écrit entre les balises ouvrante <legend> et fermante </legend> , et il doit être le premier élément à l'intérieur du <fieldset> .
Exemple de la balise HTML <legend> :
L'exemple ci-dessous illustre un balisage accessible : chaque contrôle possède un id, et chaque <label> y fait référence via un attribut for correspondant. Cliquer sur une étiquette donne alors le focus à l'input associé, et les lecteurs d'écran lisent la légende ainsi que l'étiquette ensemble.
La balise 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>Résultat
Exemple de la balise HTML <legend> avec CSS :
Exemple de la balise <legend> avec des propriétés 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>Exemple avec plusieurs fieldsets et légendes :
Les formulaires réels sont généralement découpés en plusieurs groupes — par exemple, un formulaire de paiement avec des sections livraison et facturation distinctes. Chaque groupe dispose de son propre <fieldset> et de son propre <legend> . Un lecteur d'écran préfixe alors chaque champ avec le nom de section approprié, de sorte que l'utilisateur sait toujours s'il modifie l'adresse de livraison ou l'adresse de facturation.
Formulaire avec groupes livraison et facturation
<!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 et une légende sont également la méthode recommandée pour étiqueter un ensemble de boutons radio, où la légende pose la question et chaque bouton radio possède sa propre étiquette :
<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>Attributs
| Attribut | Valeur | Description |
|---|---|---|
| align | left right center justify | Définissait l'alignement horizontal du titre par rapport au fieldset. Déprécié — supprimé en HTML5 ; utilisez CSS à la place. |
La balise <legend> prend en charge les attributs globaux et les attributs d'événements.
Remplacer l'attribut align déprécié
L'ancien attribut align="center" ne fonctionne plus de manière fiable et ne doit pas être utilisé. L'équivalent CSS est text-align sur la balise <legend> elle-même :
/* Old, deprecated: <legend align="center"> */
/* Modern replacement: */
legend {
text-align: center;
}Particularités de positionnement à connaître :
- Par défaut, la légende se positionne sur la bordure supérieure du fieldset, près du bord gauche. Les navigateurs lui réservent une position spéciale dans la mise en page, de sorte qu'elle ne se comporte pas comme une boîte de niveau bloc ordinaire.
text-aligndéplace le titre horizontalement dans l'espace que le navigateur lui alloue — les résultats varient selon les navigateurs, donc testez vos navigateurs cibles.- Pour un contrôle précis, vous pouvez remplacer le positionnement par défaut avec
positionet des décalages, ou utiliserpadding/marginpour ajuster le texte. Définirwidthsur la légende permet de l'aligner commealign="justify"le faisait autrefois.
Comment mettre en forme une balise HTML <legend> ``
Vous pouvez mettre en forme l'élément <legend> en utilisant des propriétés CSS standard telles que padding, margin, background-color, text-align et font-weight, comme illustré dans l'exemple CSS ci-dessus.