La balise HTML <optgroup>
La balise HTML <optgroup> regroupe des éléments dans une liste déroulante <select> définie par la balise <option>. Voir exemples.
La balise HTML <optgroup> regroupe des éléments <option> connexes à l'intérieur d'une liste déroulante <select>. L'attribut obligatoire label définit l'en-tête du groupe, que le navigateur affiche en gras, tandis que les options qu'il contient sont automatiquement indentées en dessous.
Pourquoi et quand utiliser <optgroup>
Un élément <select> avec une longue liste d'options à plat est difficile à parcourir. Regrouper les options sous des en-têtes significatifs aide l'utilisateur à trouver le bon choix plus rapidement. Utilisez <optgroup> lorsque :
- Votre liste déroulante comporte de nombreuses options qui appartiennent à des catégories naturelles (pays par continent, produits par type, polices par famille).
- Vous souhaitez un en-tête visuel dans la liste sans en faire une valeur sélectionnable — un libellé de groupe n'est jamais sélectionnable.
- Vous voulez désactiver tout un ensemble d'options à la fois avec un seul attribut
disabled.
La balise <optgroup> est un élément associé à un formulaire, elle n'a donc de sens qu'à l'intérieur d'un <select> placé dans un <form>.
Syntaxe
La balise <optgroup> vient en paires : les éléments <option> qu'elle regroupe sont écrits entre les balises ouvrante (<optgroup>) et fermante (</optgroup>).
Exemple de la balise HTML <optgroup> :
Exemple de liste déroulante
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<select>
<optgroup label="Books">
<option value="html">HTML</option>
<option value="css">CSS</option>
</optgroup>
<optgroup label="Snippets">
<option value="java">Java</option>
<option value="linux">Linux</option>
<option value="git">Git</option>
</optgroup>
</select>
</body>
</html>Résultat
Le navigateur affichera une liste déroulante avec deux groupes :
- Books : HTML, CSS
- Snippets : Java, Linux, Git
Exemple de la balise HTML <optgroup> avec l'attribut disabled :
Exemple de la balise HTML <optgroup>
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<select>
<optgroup disabled label="Quizzes">
<option value="html">HTML</option>
<option value="css">CSS</option>
<option value="javascript">JavaScript</option>
<option value="php">PHP</option>
</optgroup>
<optgroup label="Snippets">
<option value="git">Git</option>
<option value="angularjs">AngularJS</option>
</optgroup>
</select>
</body>
</html>Résultat
Le navigateur affichera une liste déroulante avec deux groupes :
- Quizzes (désactivé) : HTML, CSS, JavaScript, PHP — ces options apparaissent grisées et ne peuvent pas être sélectionnées.
- Snippets : Git, AngularJS
Lorsqu'un groupe est désactivé, aucune des options qu'il contient ne peut être sélectionnée ; tout l'ensemble est désactivé en un seul endroit, ce qui rend la désactivation du groupe plus pratique que l'ajout de disabled à chaque <option> individuellement.
L'attribut disabled
disabled est un attribut boolean. La présence de l'attribut signifie « désactivé » — vous devez l'écrire seul :
<optgroup disabled label="Quizzes">L'ancienne forme disabled="disabled" présentée dans l'exemple ci-dessus fonctionne encore pour des raisons historiques, mais la forme abrégée boolean est la façon moderne et recommandée. Il n'existe pas de disabled="false" — pour activer le groupe, il suffit d'omettre l'attribut.
Utiliser <optgroup> avec <select multiple>
Les groupes fonctionnent de la même manière dans une liste à sélection multiple. L'attribut multiple sur <select> permet à l'utilisateur de choisir plusieurs options (Ctrl/Cmd-clic), et les en-têtes de groupe restent non sélectionnables :
<select multiple size="8">
<optgroup label="Front-end">
<option value="html">HTML</option>
<option value="css">CSS</option>
<option value="js">JavaScript</option>
</optgroup>
<optgroup label="Back-end">
<option value="php">PHP</option>
<option value="node">Node.js</option>
</optgroup>
</select>Règles et pièges courants
labelest obligatoire. Si vous l'omettez, le groupe s'affiche avec une ligne d'en-tête vide et constitue du HTML invalide — le regroupement devient sans signification pour les utilisateurs voyants comme pour les technologies d'assistance. Fournissez toujours un libellé descriptif.- Accessibilité. Les lecteurs d'écran annoncent le
labeldu groupe lorsque l'utilisateur y entre, donc un libellé clair (par exemple « Books », « Front-end ») donne aux utilisateurs un contexte essentiel sur leur position dans la liste. - Pas d'imbrication. Un
<optgroup>ne peut pas être placé à l'intérieur d'un autre<optgroup>. Le regroupement n'est possible qu'à un seul niveau ; HTML ne prend pas en charge les sous-groupes. - Prise en charge du style incohérente. Les navigateurs affichent
<optgroup>et<option>à l'aide des contrôles natifs du système d'exploitation, donc la prise en charge de CSS est très limitée et incohérente. Chrome, Firefox et Safari ignorent de nombreuses propriétés — les arrière-plans, les marges intérieures et les polices n'ont souvent aucun effet. Le CSS ci-dessous peut fonctionner dans certains navigateurs et être complètement ignoré dans d'autres, ne vous y fiez donc pas. Si vous avez besoin de listes groupées entièrement stylisées, construisez un widget personnalisé avec JavaScript plutôt que de styliser un<select>natif.
Attributs
| Attribut | Valeur | Description |
|---|---|---|
| disabled | disabled | Indique que la sélection des éléments du groupe est désactivée. |
| label | text | Définit un libellé pour le groupe, qui sera affiché comme en-tête dans la liste déroulante. Attribut obligatoire. |
La balise <optgroup> prend en charge les attributs globaux et les attributs d'événement.
Balises associées
<select>— la liste déroulante qui contient les groupes.<option>— les éléments individuels regroupés par<optgroup>.<form>— le formulaire qui soumet la valeur sélectionnée.
Comment styliser une balise HTML <optgroup>
Comme indiqué dans les pièges ci-dessus, la prise en charge par les navigateurs de la mise en forme des contrôles de formulaire natifs est limitée et incohérente. Lorsqu'elle est respectée, vous pouvez utiliser du CSS comme celui-ci pour ajuster l'en-tête du groupe et ses options, mais testez dans chaque navigateur cible avant de vous y fier :
optgroup {
font-weight: bold;
color: #333;
}
optgroup option {
font-weight: normal;
padding-left: 15px;
}