<optgroup> : l'élément de groupe d'options
Baseline
Widely available
*
Cette fonctionnalité est bien établie et fonctionne sur de nombreux appareils et versions de navigateurs. Elle est disponible sur tous les navigateurs depuis juillet 2015.
* Certaines parties de cette fonctionnalité peuvent bénéficier de prise en charge variables.
L'élément HTML <optgroup> crée un regroupement d'options à l'intérieur d'un élément HTML <select>.
Dans les éléments <select> personnalisables, l'élément <legend> est autorisé comme enfant de <optgroup>, pour fournir une étiquette facile à cibler et à mettre en forme. Cela remplace tout texte défini dans l'attribut label de l'élément <optgroup>, et possède la même sémantique.
Exemple interactif
<label for="dino-select">Choisissez un dinosaure :</label>
<select id="dino-select">
<optgroup label="Théropodes">
<option>Tyrannosaurus</option>
<option>Velociraptor</option>
<option>Deinonychus</option>
</optgroup>
<optgroup label="Sauropodes">
<option>Diplodocus</option>
<option>Saltasaurus</option>
<option>Apatosaurus</option>
</optgroup>
</select>
label {
display: block;
margin-bottom: 10px;
}
Note :
Il n'est pas possible d'imbriquer plusieurs éléments <optgroup> entre eux.
Attributs
Cet élément inclut les attributs universels.
disabled-
Si cet attribut booléen est défini et aucun élément du groupe d'options ne peut être sélectionné. Cet élément ne recevra pas les évènements de navigation (tels que les clics ou les changements de sélection). Les navigateurs affichent ces éléments en les grisant.
label-
Le nom du groupe d'options, que le navigateur peut utiliser pour étiqueter les options dans l'interface utilisateur. Cet attribut est obligatoire si cet élément est utilisé.
Exemples
<select>
<optgroup label="Groupe 1">
<option>Option 1.1</option>
</optgroup>
<optgroup label="Groupe 2">
<option>Option 2.1</option>
<option>Option 2.2</option>
</optgroup>
<optgroup label="Groupe 3" disabled>
<option>Option 3.1</option>
<option>Option 3.2</option>
<option>Option 3.3</option>
</optgroup>
</select>
Résultat
Résumé technique
| Catégories de contenu | Aucune. |
|---|---|
| Contenu autorisé | Zéro ou plusieurs éléments <option>. Dans les éléments de sélection personnalisables, un élément <legend> est autorisé comme enfant de <optgroup>. |
| Omission de balises |
La balise de début est obligatoire, la balise de fin est optionnelle si
l'élément est immédiatement suivi par un autre élément <optgroup>
ou si l'élément parent n'a pas d'autre contenu.
|
| Parents autorisés | Un élément <select>. |
| Rôle ARIA implicite | group |
| Rôles ARIA autorisés | Aucun role autorisé |
| Interface DOM | HTMLOptGroupElement |
Spécifications
| Specification |
|---|
| HTML # the-optgroup-element |
Compatibilité des navigateurs
Voir aussi
- Les autres éléments relatifs aux formulaires :
<form>,<legend>,<label>,<button>,<select>,<datalist>,<option>,<fieldset>,<textarea>,<input>,<output>,<progress>et<meter>. - Les éléments de sélection personnalisables