Tag HTML <optgroup>
Le tag HTML <optgroup> contient les tags <option> regroupés dans un groupe. (Le tag <option> spécifie les éléments de la liste déroulante définie par le tag <select>).
Le contenu du tag <optgroup> ressemble à un en-tête d'un contour en gras. Les éléments contenus dans le tag <option> sont décalés vers la droite.
Syntaxe
Le tag <optgroup> est apparié; le tag fermanat (</optgroup>) est requis.
Le tag <option> est utilisé, généralement avec l'attribut value, pour spécifier la valeur envoyée au serveur pour un traitement ultérieur.
Exemple
<!DOCTYPE html>
<html>
<head>
<title>Titre du document</title>
</head>
<body>
<select>
<optgroup label="Livres">
<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
Voyons un exemple d'utilisation de l'attribut disabled.
Exemple
<!DOCTYPE html>
<html>
<head>
<title>Titre du 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
Attributs
| Attribut | Valeur | Description |
|---|---|---|
| disabled | disabled | Indique, que les éléments de ce groupe no sont pas disponibles pour la séléction. |
| label | text | Spécifie le nom du groupe qui sera affiché dans la liste déroulante.
Attribut requis. |
Le tag <optgroup> supporte également les Attributs globaux et les Attributs d'événements.
Comment styler le tag HTML <optgroup> ?
Propriétés communes pour modifier le poids visuel/emphase/taille du texte dans le tag <optgroup>:
- La propriété CSS font-style définit le style de la police: normal | italic | oblique | initial | inherit
- La propriété CSS font-family spécifie une liste priorisée d’un ou plusieurs noms de famille de police et/ou noms de famille génériques pour l’élément sélectionné.
- La propriété CSS font-size définit la taille de la police.
- La propriété CSS font-weight définit si la police doit être en gras ou épaisse.
- La propriété CSS text-transform contrôle le cas de texte et la capitalisation.
- La propriété CSS text-decoration spécifie la décoration ajoutée au texte, et est une propriété raccourcie pour les propriétés CSS text-decoration-line, text-decoration-color, text-decoration-style.
Coloration du texte dans le tag HTML <optgroup>:
- La propriété CSS color décrit la couleur du contenu et les décorations du texte.
- La propriété CSS background-color définit la couleur de fond d’un élément.
Styles de mise en page du texte pour la tag HTML <optgroup>:
- La propriété CSS text-indent spécifie l’indentation de la première ligne dans un bloc de texte.
- La propriété CSS text-overflow spécifie comment le contenu qui n’est pas affiché doit être signalé à l’utilisateur.
- La propriété CSS white-space spécifie comment l’espace blanc à l’intérieur d’un élément est géré.
- La propriété CSS word-break spécifie où les lignes doivent être cassées.
Autres propriétés utiles pour le tag HTML <optgroup>:
- La propriété CSS text-shadow ajoute des ombres au texte.
- La propriété CSS text-align-last définit l’alignement de la dernière ligne du texte.
- La propriété CSS line-height spécifie la hauteur d’une ligne.
- La propriété CSS letter-spacing définit les espaces entre les lettres/caractères d’un texte.
- La propriété CSS word-spacing permet de définir l’espacement entre les mots.
Support de Navigateurs
|
|
|
|
|
|---|---|---|---|---|
| ✓ | ✓ | ✓ | ✓ | ✓ |
Pratiquez vos connaissances
Qu'est-ce que la balise HTML <optgroup> permet de faire ?
Correcte!
Incorrecte!