Balise HTML <optgroup>
La balise HTML <optgroup> regroupe les balises <option> ensemble. L'attribut obligatoire <label> définit le titre du groupe, qui s'affiche en gras, tandis que les options à l'intérieur sont automatiquement indentées. (La balise <option> définit les éléments d'une liste déroulante créée par la balise <select>.)
La balise <optgroup> est considérée comme un élément de formulaire.
Syntaxe
La balise <optgroup> s'utilise par paire. Le contenu est écrit entre les balises d'ouverture (<optgroup>) et de fermeture (</optgroup>).
Exemple de la balise HTML <optgroup> :
Exemple d'une 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 :
- Livres : HTML, CSS
- Extraits : 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="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 :
- Quiz (désactivé) : HTML, CSS, JavaScript, PHP
- Extraits : Git, AngularJS
Attributs
| Attribut | Valeur | Description |
|---|---|---|
| disabled | disabled | Indique que la sélection des éléments du groupe est désactivée. |
| label | texte | Définit un libellé pour le groupe, qui sera affiché comme un titre dans la liste déroulante. Attribut obligatoire. |
La balise <optgroup> prend en charge les Attributs globaux et les Attributs d'événement.
Comment styliser une balise HTML <optgroup>
Vous pouvez utiliser CSS pour modifier l'apparence du titre du groupe et de ses options :
optgroup {
font-weight: bold;
color: #333;
}
optgroup option {
font-weight: normal;
padding-left: 15px;
}Pratique
Quelle est la fonction de la balise HTML 'optgroup' ?