Tag <optgroup>

Tag <optgroup>

Definition

Status: Aktueller Standard

Das Tag <optgroup> steht für ordered list (geordnete Liste).

Das Element <optgroup> gruppiert verwandte <option>-Elemente innerhalb eines <select>-Menüs oder einer <datalist>. Es dient rein der visuellen und semantischen Strukturierung; die Gruppe selbst ist nicht auswählbar. Ein <optgroup> darf kein weiteres <optgroup> enthalten. Es ist nur eine Ebene der Gruppierung möglich. Es darf ausschließlich <option>-Elemente oder <legend>-Elemente enthalten.

Syntax

<ol [attribut]><li>...</li></ol>

Attribute bzw. Unterelemente

label

Erforderlich: Definiert den Text, der als Überschrift der Gruppe im Dropdown erscheint

disabled

Deaktiviert die gesamte Gruppe inklusive aller enthaltenen Optionen (ausgegraut).

Beispiele

= Tag

= Attribut

= Wert

Text

= Kommentar bzw. wichtig!

Beispiel <optgroup> - Milchprodukte ist "disabled"

Der Code:

<label for="fruits">Wähle ein Produkt:</label>
<select id="fruits" name="product">
  <optgroup label="Obst">
    <option value="apple">Apfel</option>
    <option value="banana">Banane</option>
    <option value="orange">Orange</option>
    <option value="grape">Traube/option>
  </optgroup>
  <optgroup label="Gemüse">
    <option value="carrot">Karotte</option>
    <option value="broccoli">Brokkoli</option>
    <option value="pepper">Paprika</option>
    <option value="tomato">Tomate</option>
  </optgroup>
  <optgroup label="Milchprodukte" disabled>
    <option value="milk">Milch</option>
    <option value="cheese">Käse</option>
    <option value="yogurt">Joghurt</option>
    <option value="butter">Butter</option>
  </optgroup>
</select>

Ergebnis:

Ergebnis: <optgroup>-Demo 1
Milchprodukte ist "disabled"

CSS-Tipps:

Wie bei fast allen Formularelementen wird ein Großteil des Aussehens vom Betriebssystem bzw. dem Browser vorgegeben. Was den Text angeht kann dieser mit <color>, <background-color>, <font-family> und <font-style> meist angepasst werden. <padding>, <margin> oder <border> werden meist nicht unterstützt. Das Label (die Überschrift der Gruppe) lässt sich ebenfalls nicht sauber ansprechen. Mit optgroup::before { content: ... } kann man bei "Firefox" etwas Einfluß nehmen, akzeptieren aber die anderen Browser nicht.