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>:

Coloration du texte dans le tag HTML <optgroup>:

Styles de mise en page du texte pour la tag HTML <optgroup>:

Autres propriétés utiles pour le tag HTML <optgroup>:


Support de Navigateurs



Trouvez-vous cela utile?

Articles Associées