Définition de la balise <fieldset>
La balise <fieldset> est un élément HTML qui permet de regrouper logiquement plusieurs champs au sein d'un formulaire. Elle crée visuellement un cadre autour des éléments qu'elle contient, facilitant ainsi la compréhension et l'organisation des formulaires complexes. Cette balise est particulièrement utile lorsque vous devez collecter différentes catégories d'informations auprès de vos utilisateurs.
En combinaison avec la balise <legend>, qui permet d'attribuer un titre au groupe de champs, <fieldset> améliore considérablement l'accessibilité et l'expérience utilisateur de vos formulaires. Si vous souhaitez maîtriser parfaitement les formulaires HTML et toutes leurs subtilités, nous vous recommandons de suivre notre formation complète sur HTML.
Syntaxe de base
La syntaxe de la balise <fieldset> est simple. Elle s'utilise comme conteneur englobant les éléments <input> et autres champs de formulaire que vous souhaitez regrouper :
<form>
<fieldset>
<legend>Informations personnelles</legend>
<label for="nom">Nom :</label>
<input type="text" id="nom" name="nom">
<label for="prenom">Prénom :</label>
<input type="text" id="prenom" name="prenom">
</fieldset>
</form>Comme vous pouvez le constater, la balise <legend> doit être le premier élément enfant de <fieldset> pour que le navigateur l'affiche correctement comme titre du groupe.
Attributs de la balise <fieldset>
La balise <fieldset> accepte plusieurs attributs qui vous permettent de contrôler son comportement et son apparence :
| Attribut | Description | Valeurs possibles |
|---|---|---|
disabled | Désactive tous les champs contenus dans le fieldset | Attribut booléen (présent ou absent) |
form | Associe le fieldset à un formulaire spécifique | ID du formulaire cible |
name | Définit un nom pour le fieldset | Chaîne de caractères |
L'attribut disabled
L'attribut disabled est particulièrement puissant car il permet de désactiver d'un seul coup tous les champs de formulaire contenus dans le <fieldset>. C'est très pratique pour gérer des sections conditionnelles de formulaire :
<form>
<fieldset disabled>
<legend>Options premium (abonnés uniquement)</legend>
<label for="feature1">
<input type="checkbox" id="feature1" name="feature1">
Fonctionnalité avancée 1
</label>
<label for="feature2">
<input type="checkbox" id="feature2" name="feature2">
Fonctionnalité avancée 2
</label>
</fieldset>
</form>Dans cet exemple, tous les champs du fieldset sont automatiquement désactivés et ne peuvent pas être modifiés par l'utilisateur. Les valeurs de ces champs ne seront pas non plus envoyées lors de la soumission du formulaire.
L'attribut form
L'attribut form vous permet d'associer un <fieldset> à un formulaire même s'il n'est pas physiquement imbriqué dans celui-ci :
<form id="monFormulaire">
<!-- Contenu principal du formulaire -->
<button type="submit">Envoyer</button>
</form>
<!-- Fieldset en dehors du formulaire mais associé à celui-ci -->
<fieldset form="monFormulaire">
<legend>Options supplémentaires</legend>
<label for="newsletter">
<input type="checkbox" id="newsletter" name="newsletter">
S'inscrire à la newsletter
</label>
</fieldset>
Exemples pratiques d'utilisation
Voyons maintenant des cas d'utilisation concrets de la balise <fieldset> dans différents contextes.
Formulaire d'inscription complet
Voici un exemple de formulaire d'inscription utilisant plusieurs fieldsets pour organiser les différentes sections :
<form action="/inscription" method="post">
<fieldset>
<legend>Identifiants de connexion</legend>
<label for="email">Adresse email :</label>
<input type="email" id="email" name="email" required>
<label for="password">Mot de passe :</label>
<input type="password" id="password" name="password" required>
<label for="password-confirm">Confirmer le mot de passe :</label>
<input type="password" id="password-confirm" name="password-confirm" required>
</fieldset>
<fieldset>
<legend>Informations personnelles</legend>
<label for="nom">Nom :</label>
<input type="text" id="nom" name="nom" required>
<label for="prenom">Prénom :</label>
<input type="text" id="prenom" name="prenom" required>
<label for="date-naissance">Date de naissance :</label>
<input type="date" id="date-naissance" name="date-naissance">
</fieldset>
<fieldset>
<legend>Adresse de livraison</legend>
<label for="adresse">Adresse :</label>
<input type="text" id="adresse" name="adresse">
<label for="ville">Ville :</label>
<input type="text" id="ville" name="ville">
<label for="code-postal">Code postal :</label>
<input type="text" id="code-postal" name="code-postal">
</fieldset>
<button type="submit">S'inscrire</button>
</form>Cette structure permet à l'utilisateur de comprendre immédiatement quelles informations sont demandées dans chaque section.
Grouper des boutons radio
L'un des cas d'utilisation les plus courants de <fieldset> est le regroupement de boutons radio pour une même question :
<form>
<fieldset>
<legend>Quel est votre niveau d'expérience en HTML ?</legend>
<label>
<input type="radio" name="niveau" value="debutant">
Débutant
</label>
<label>
<input type="radio" name="niveau" value="intermediaire">
Intermédiaire
</label>
<label>
<input type="radio" name="niveau" value="avance">
Avancé
</label>
<label>
<input type="radio" name="niveau" value="expert">
Expert
</label>
</fieldset>
</form>L'utilisation de <fieldset> avec <legend> pour les groupes de boutons radio est une bonne pratique d'accessibilité recommandée par les directives WCAG. Elle permet aux lecteurs d'écran d'annoncer correctement la question associée aux options.
Fieldsets imbriqués
Il est tout à fait possible d'imbriquer des <fieldset> pour créer des sous-groupes logiques :
<form>
<fieldset>
<legend>Préférences de notification</legend>
<fieldset>
<legend>Par email</legend>
<label>
<input type="checkbox" name="email-promo">
Offres promotionnelles
</label>
<label>
<input type="checkbox" name="email-news">
Newsletter hebdomadaire
</label>
</fieldset>
<fieldset>
<legend>Par SMS</legend>
<label>
<input type="checkbox" name="sms-promo">
Offres promotionnelles
</label>
<label>
<input type="checkbox" name="sms-urgent">
Alertes urgentes uniquement
</label>
</fieldset>
</fieldset>
</form>
Styliser la balise <fieldset> avec CSS
Par défaut, les navigateurs appliquent un style basique au <fieldset> : une bordure et un léger padding. Vous pouvez personnaliser entièrement son apparence avec CSS :
fieldset {
border: 2px solid #3498db;
border-radius: 8px;
padding: 20px;
margin-bottom: 20px;
background-color: #f8f9fa;
}
fieldset legend {
font-weight: bold;
font-size: 1.1em;
color: #2c3e50;
padding: 0 10px;
background-color: #fff;
}
fieldset:disabled {
opacity: 0.6;
background-color: #e9ecef;
}
fieldset:disabled legend {
color: #6c757d;
}Ce style moderne donne un aspect plus professionnel à vos formulaires tout en conservant une bonne lisibilité.
Supprimer le style par défaut
Si vous souhaitez partir d'une base neutre et construire votre propre style, vous pouvez réinitialiser les styles par défaut :
fieldset {
border: none;
padding: 0;
margin: 0;
min-width: 0; /* Fix pour certains navigateurs */
}
fieldset legend {
padding: 0;
}Attention : si vous supprimez complètement les repères visuels du <fieldset>, assurez-vous de les remplacer par d'autres indices visuels (espacement, couleurs de fond, etc.) pour maintenir une bonne organisation visuelle.
Accessibilité et bonnes pratiques
La balise <fieldset> joue un rôle crucial dans l'accessibilité des formulaires. Voici les bonnes pratiques à suivre :
Toujours utiliser <legend>
Chaque <fieldset> devrait contenir une balise <legend> descriptive. Sans elle, les utilisateurs de lecteurs d'écran ne comprendront pas le contexte du groupe de champs :
<!-- ❌ Mauvaise pratique -->
<fieldset>
<label><input type="radio" name="genre"> Homme</label>
<label><input type="radio" name="genre"> Femme</label>
</fieldset>
<!-- ✅ Bonne pratique -->
<fieldset>
<legend>Genre</legend>
<label><input type="radio" name="genre" value="homme"> Homme</label>
<label><input type="radio" name="genre" value="femme"> Femme</label>
</fieldset>
Utiliser des legends descriptives
La <legend> doit être suffisamment descriptive pour être comprise hors contexte :
<!-- ❌ Trop vague -->
<fieldset>
<legend>Section 1</legend>
<!-- ... -->
</fieldset>
<!-- ✅ Clair et descriptif -->
<fieldset>
<legend>Informations de facturation</legend>
<!-- ... -->
</fieldset>
Ne pas abuser des fieldsets
N'utilisez <fieldset> que lorsque c'est vraiment nécessaire. Un formulaire très simple avec seulement deux ou trois champs n'a généralement pas besoin de regroupement :
<!-- Pour un formulaire de connexion simple, pas besoin de fieldset -->
<form>
<label for="login-email">Email :</label>
<input type="email" id="login-email" name="email" required>
<label for="login-password">Mot de passe :</label>
<input type="password" id="login-password" name="password" required>
<button type="submit">Se connecter</button>
</form>
Compatibilité navigateur
La balise <fieldset> bénéficie d'une excellente compatibilité avec tous les navigateurs modernes et anciens :
| Navigateur | Support |
|---|---|
| Chrome | ✅ Toutes versions |
| Firefox | ✅ Toutes versions |
| Safari | ✅ Toutes versions |
| Edge | ✅ Toutes versions |
| Internet Explorer | ✅ IE6+ |
| Opera | ✅ Toutes versions |
Vous pouvez donc utiliser <fieldset> sans aucune inquiétude concernant la compatibilité.
Différence entre <fieldset> et <div>
Vous pourriez être tenté d'utiliser un simple <div> pour regrouper visuellement vos champs de formulaire. Cependant, il existe des différences fondamentales :
| Aspect | <fieldset> | <div> |
|---|---|---|
| Sémantique | Signification claire : groupe de champs liés | Conteneur générique sans signification |
| Accessibilité | Annoncé par les lecteurs d'écran | Ignoré par les lecteurs d'écran |
| Attribut disabled | Désactive tous les champs enfants | Non disponible |
| Légende intégrée | Support natif avec <legend> | Doit être simulé avec d'autres balises |
Privilégiez toujours <fieldset> pour grouper des champs de formulaire sémantiquement liés. Réservez <div> pour les besoins purement visuels ou de mise en page.
Questions fréquentes
Puis-je utiliser <fieldset> en dehors d'un formulaire ?
Techniquement oui, la balise <fieldset> est valide en dehors d'un élément <button> <form>. Cependant, son utilisation principale et recommandée reste le regroupement de champs de formulaire. L'utiliser dans un autre contexte serait sémantiquement incorrect et pourrait perturber les technologies d'assistance.
Comment masquer visuellement la legend tout en la gardant accessible ?
Vous pouvez utiliser une technique CSS de masquage accessible qui cache visuellement l'élément tout en le laissant disponible pour les lecteurs d'écran :
fieldset legend.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}Cette approche est préférable à display: none ou visibility: hidden qui masqueraient également l'élément aux technologies d'assistance.
L'attribut disabled du fieldset fonctionne-t-il avec tous les types d'input ?
Oui, l'attribut disabled sur un <fieldset> désactive automatiquement tous les contrôles de formulaire qu'il contient : <input>, <button>, <select>, <textarea>, etc. C'est l'un des avantages majeurs de cette balise pour gérer des sections conditionnelles.
Comment apprendre à créer des formulaires HTML professionnels ?
Pour maîtriser la création de formulaires HTML accessibles et professionnels, incluant l'utilisation optimale de <fieldset> et de nombreuses autres balises, nous vous recommandons de suivre notre formation complète sur HTML. Vous y apprendrez toutes les bonnes pratiques pour créer des interfaces web de qualité.