7.7. Regrouper et titrer les champs de même nature avec <fieldset> et <legend>
Lorsqu’un formulaire propose plusieurs groupes de champs dont certains ont des intitulés identiques, utiliser les balises <fieldset> et <legend>.
<fieldset> <legend>Participant 1</legend> <label for="prenom-1">Prénom</label> <input type="text" id="prenom-1" name="prenom-1" /> <label for="nom-1">Nom</label> <input type="text" id="nom-1" name="nom-1" /> […] </fieldset> <fieldset> <legend>Participant 2</legend> <label for="prenom-2">Prénom</label> <input type="text" id="prenom-2" name="prenom-2" /> <label for="nom-2">Nom</label> <input type="text" id="nom-2" name="nom-2" /> […] </fieldset>
Attention
Les balises <fieldset> et <legend> sont systématiquement à utiliser lorsque plusieurs groupes de champs disposent d’intitulés identiques.
Par exemple :
- Une série de questions sur une même page avec comme réponses possibles « oui » ou « non ».
- Une liste de participants à un évènement avec à chaque fois « nom » et « prénom ».
Si le formulaire est long mais qu’aucun groupe de champs ne dispose d’intitulés identiques, utiliser les balises <h1> à <h6> pour titrer les groupes de champs.
Remarque
L’utilisation des balises <fieldset> et <legend> est notamment nécessaire lors de l’intégration de listes de boutons radio ou de cases à cocher dans la page.
Par exemple :
<fieldset>
<legend>Sports pratiqués</legend>
<ul>
<li>
<input type="checkbox" id="basket" />
<label for="basket">Basket</label>
</li>
<li>
<input type="checkbox" id="tennis" />
<label for="tennis">Tennis</label>
</li>
[…]
</ul>
</fieldset>
2 commentaires
-
Ce commentaire a été publié sur une ancienne version des notices AcceDe Web. Il se peut que son contenu ne soit plus d'actualité.
attention fieldset / legend ne fonctionne pas sur voiceover mac ou ios. De plus, cela oblige à effectuer des raccourcis claviers pour entrer et sortir du fieldset donc c’est donc à manipuler avec beaucoup de précaution
-
Ce commentaire a été publié sur une ancienne version des notices AcceDe Web. Il se peut que son contenu ne soit plus d'actualité.
Bonjour Aurélien,
Comme je viens de tester à l’instant sur iOS pour un projet : sur iOS 9.2.1, avec Safari ou Firefox et VoiceOver,
<fieldset>/<legend>, ne sont toujours pas supportés.
L’usage n’est pas bloquant, mais lors de la navigation de champ en champ, le contenu de<legend>n’est pas restitué.
-
