<optgroup>

Un groupe nommé d’options à l’intérieur d’une liste `<select>`.

Affichage: block
Balise fermante: Obligatoire
Contenu autorisé: Éléments <option>

Sur cette page

Exemple
Définition et utilisation
Syntaxe
Attributs
Attributs en pratique
Compatibilité des navigateurs
Bonnes pratiques
Entrées associées

Exemple

HTML

<label for="course">Cours</label>
<select id="course" name="course">
  <optgroup label="Frontend">
    <option value="html">HTML et CSS</option>
    <option value="js">JavaScript</option>
    <option value="react">React</option>
  </optgroup>
  <optgroup label="Backend">
    <option value="python">Python</option>
    <option value="node">Node.js</option>
  </optgroup>
</select>

Aperçu

Définition et utilisation

L’élément <optgroup> regroupe des options liées sous un en-tête commun. Vous donnez le nom du groupe dans l’attribut label, et le navigateur l’affiche comme un en-tête qu’on ne peut pas sélectionner.

Les groupes mettent de l’ordre dans de longues listes : des cours classés par technologie, des villes classées par région, des horaires de permanence classés par jour de la semaine. Les groupes ne peuvent pas être imbriqués, et <optgroup> ne fonctionne pas dans <datalist>.

L’attribut disabled sur le groupe bloque en une fois toutes ses options, ce qui est plus pratique que de désactiver chacune séparément.

Syntaxe

<optgroup label="Nom du groupe">
  <option>…</option>
</optgroup>

Attributs

label
texte
Le nom du groupe affiché au-dessus de ses options. Sans lui, le groupe n’a pas d’en-tête, indiquez-le donc toujours.
disabled
attribut booléen
Désactive toutes les options du groupe. Elles restent visibles, mais ne peuvent pas être choisies.

Attribut	Valeurs	Description
label	texte	Le nom du groupe affiché au-dessus de ses options. Sans lui, le groupe n’a pas d’en-tête, indiquez-le donc toujours.
disabled	attribut booléen	Désactive toutes les options du groupe. Elles restent visibles, mais ne peuvent pas être choisies.

L’élément accepte aussi tous les attributs globaux, comme class, id, style ou hidden.

Attributs en pratique

label

texte

Le nom du groupe affiché au-dessus de ses options. Sans lui, le groupe n’a pas d’en-tête, indiquez-le donc toujours.

HTML

<select name="hour" aria-label="Horaire de permanence">
  <optgroup label="Lundi">
    <option>17:00</option>
    <option>18:00</option>
  </optgroup>
  <optgroup label="Mercredi">
    <option>16:00</option>
  </optgroup>
</select>

Aperçu

disabled

attribut booléen

Désactive toutes les options du groupe. Elles restent visibles, mais ne peuvent pas être choisies.

HTML

<select name="course" aria-label="Cours">
  <optgroup label="Disponible maintenant">
    <option>HTML et CSS</option>
  </optgroup>
  <optgroup label="Bientôt" disabled>
    <option>Svelte</option>
    <option>Rust</option>
  </optgroup>
</select>

Aperçu

Compatibilité des navigateurs

Largement disponible

Fonctionne dans tous les navigateurs modernes, y compris sur mobile. Vous pouvez l’utiliser sans crainte.

Chrome
Edge
Firefox
Safari

Bonnes pratiques

Le nom du groupe n’est pas envoyé avec le formulaire. Si le serveur a besoin de cette information, écrivez-la dans le value de l’option, par exemple value="frontend-react".
N’essayez pas d’imbriquer des groupes. Si vous avez besoin de plusieurs niveaux, répartissez le choix sur deux listes séparées.

Entrées associées

Vous voyez une erreur ou il manque un exemple ? Écrivez-nous.

Leçons gratuitesPratiquez HTML dans le cours HTML et CSSDes exercices avec indices, un éditeur de code et une progression enregistrée au fur et à mesure.Voir le cours