L'élément HTML <optgroup>, utilisé dans un formulaire, permet de créer un groupe d'options parmi lesquelles on peut choisir dans un élément <select>.

Catégories de contenu Aucune.
Contenu autorisé Zéro ou plusieurs éléments <option>.
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ôles ARIA autorisés Aucun.
Interface DOM HTMLOptGroupElement

Note : Il n'est pas possible d'imbriquer plusieurs éléments <optgroup> entre eux.

Attributs

Comme tous les autres éléments HTML, 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 focus). Les navigateurs affichent ces éléments en les grisant.
label
Le nom du groupe d'options qui peut être affiché par le navigateur. Cet attribut est obligatoire.

Exemples

HTML

<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

Spécifications

Spécification État Commentaires
HTML Living Standard
La définition de '<optgroup>' dans cette spécification.
Standard évolutif  
HTML5
La définition de '<optgroup>' dans cette spécification.
Recommendation  
HTML 4.01 Specification
La définition de '<optgroup>' dans cette spécification.
Recommendation  

Compatibilité des navigateurs

Update compatibility data on GitHub
OrdinateurMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariWebview AndroidChrome pour AndroidEdge MobileFirefox pour AndroidOpera pour AndroidSafari pour iOSSamsung Internet
Support simpleChrome Support complet 1Edge Support complet OuiFirefox Support complet 1IE Support complet 5.5Opera Support complet OuiSafari Support complet OuiWebView Android Support complet OuiChrome Android Support complet OuiEdge Mobile Support complet OuiFirefox Android Support complet 4Opera Android Support complet OuiSafari iOS Support complet OuiSamsung Internet Android Support complet Oui
disabledChrome Support complet 1Edge Support complet OuiFirefox Support complet 1IE Support complet 8Opera Support complet OuiSafari Support complet OuiWebView Android Support complet OuiChrome Android Support complet OuiEdge Mobile Support complet OuiFirefox Android Support complet 4Opera Android Support complet OuiSafari iOS Support complet OuiSamsung Internet Android Support complet Oui
labelChrome Support complet 1Edge Support complet OuiFirefox Support complet 1IE Support complet 5.5Opera Support complet OuiSafari Support complet OuiWebView Android Support complet OuiChrome Android Support complet OuiEdge Mobile Support complet OuiFirefox Android Support complet 4Opera Android Support complet OuiSafari iOS Support complet OuiSamsung Internet Android Support complet Oui

Légende

Support complet  
Support complet

Voir aussi

Étiquettes et contributeurs liés au document

Contributeurs à cette page : SphinxKnight, tregagnon, ethertank, teoli
Dernière mise à jour par : SphinxKnight,