<legend>
La légende d’un groupe de champs `<fieldset>`, affichée sur son cadre.
- Affichage
- block
- Balise fermante
- Obligatoire
- Contenu autorisé
- Contenu phrasant, éventuellement avec des titres
<h1>-<h6>
Exemple
#<fieldset>
<legend>À quelle fréquence voulez-vous étudier ?</legend>
<label><input type="radio" name="pace" value="daily"> Tous les jours</label>
<label><input type="radio" name="pace" value="weekly" checked> Plusieurs fois par semaine</label>
<label><input type="radio" name="pace" value="weekend"> Le week-end</label>
</fieldset>Définition et utilisation
#L’élément <legend> donne un nom au groupe de champs. Il doit être le premier enfant de l’élément <fieldset>. Le navigateur le dessine d’une façon particulière : le texte interrompt le bord supérieur du cadre, comme un titre incrusté dans le contour.
Les lecteurs d’écran utilisent la légende comme nom de tout le groupe. Pour des questions avec des boutons radio, la légende devrait contenir la question elle-même, par exemple « À quelle fréquence voulez-vous étudier ? », et les étiquettes des boutons seulement les réponses.
Vous pouvez y placer du contenu phrasant, et si le groupe constitue une grande section du formulaire, même un titre (<h1>-<h6>).
Syntaxe
#<fieldset>
<legend>Légende du groupe</legend>
…
</fieldset>Attributs
#Cet élément n’a pas d’attributs propres. Il accepte les attributs globaux, comme class, id ou hidden.
CSS par défaut
#La plupart des navigateurs affichent cet élément avec ces styles par défaut :
legend {
display: block;
padding-inline: 2px;
}Compatibilité des navigateurs
#Largement disponible
Fonctionne dans tous les navigateurs modernes, y compris sur mobile. Vous pouvez l’utiliser sans crainte.
- Chrome
- Edge
- Firefox
- Safari
Bonnes pratiques
#- Écrivez des légendes courtes. Certains lecteurs d’écran les répètent à chaque champ du groupe.
- La légende ne fonctionne que comme premier enfant de
<fieldset>. Ailleurs, c’est un texte ordinaire sans signification particulière.
Entrées associées
#Vous voyez une erreur ou il manque un exemple ? Écrivez-nous.