HTML <optgroup>-Tag
Das HTML-Tag <optgroup> gruppiert Elemente in einer Dropdown-Liste <select>, die durch das <option>-Tag definiert werden.
Das HTML-Tag <optgroup> gruppiert verwandte <option>-Elemente in einer <select>-Dropdown-Liste zusammen. Das erforderliche Attribut label definiert die Gruppenüberschrift, die der Browser fett dargestellt anzeigt, während die Optionen darunter automatisch eingerückt werden.
Wann und warum <optgroup> verwenden
Ein <select>-Element mit einer langen, flachen Liste von Optionen ist schwer zu überschauen. Das Gruppieren der Optionen unter aussagekräftigen Überschriften hilft dem Benutzer, die richtige Auswahl schneller zu finden. Verwende <optgroup>, wenn:
- Deine Dropdown-Liste viele Optionen enthält, die in natürliche Kategorien fallen (Länder nach Kontinent, Produkte nach Typ, Schriftarten nach Familie).
- Du eine visuelle Überschrift innerhalb der Liste möchtest, ohne dass sie ein auswählbarer Wert ist – eine Gruppenbezeichnung ist niemals auswählbar.
- Du eine ganze Gruppe von Optionen auf einmal mit einem einzigen
disabled-Attribut deaktivieren möchtest.
Das <optgroup>-Tag ist ein formularbezogenes Element und ergibt daher nur innerhalb eines <select> Sinn, das sich in einem <form> befindet.
Syntax
Das <optgroup>-Tag kommt in Paaren: Die <option>-Elemente, die es gruppiert, werden zwischen dem öffnenden (<optgroup>) und schließenden (</optgroup>) Tag geschrieben.
Beispiel des HTML-Tags <optgroup>:
Beispiel einer Dropdown-Liste
<!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>Ergebnis
Der Browser rendert eine Dropdown-Liste mit zwei Gruppen:
- Books: HTML, CSS
- Snippets: Java, Linux, Git
Beispiel des HTML-Tags <optgroup> mit dem disabled-Attribut:
Beispiel des HTML-Tags <optgroup>
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<select>
<optgroup 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>Ergebnis
Der Browser rendert eine Dropdown-Liste mit zwei Gruppen:
- Quizzes (deaktiviert): HTML, CSS, JavaScript, PHP – diese Optionen erscheinen ausgegraut und können nicht ausgewählt werden.
- Snippets: Git, AngularJS
Wenn eine Gruppe deaktiviert ist, kann keine der darin enthaltenen Optionen ausgewählt werden; die gesamte Gruppe wird an einer Stelle deaktiviert. Daher ist es bequemer, die Gruppe zu deaktivieren, als disabled zu jedem einzelnen <option>-Tag hinzuzufügen.
Das disabled-Attribut
disabled ist ein boolean-Attribut. Das Vorhandensein des Attributs bedeutet „deaktiviert" – du solltest es allein schreiben:
<optgroup disabled label="Quizzes">Die ältere Form disabled="disabled", die im obigen Beispiel gezeigt wird, funktioniert aus historischen Gründen noch, aber die boolesche Kurzschreibweise ist der moderne, empfohlene Weg. Es gibt kein disabled="false" – um die Gruppe zu aktivieren, lässt man das Attribut einfach weg.
<optgroup> mit <select multiple> verwenden
Gruppen funktionieren auf die gleiche Weise in einer Mehrfachauswahlliste. Das multiple-Attribut bei <select> erlaubt es dem Benutzer, mehrere Optionen auszuwählen (Strg/Cmd-Klick), und die Gruppenüberschriften bleiben nicht auswählbar:
<select multiple size="8">
<optgroup label="Front-end">
<option value="html">HTML</option>
<option value="css">CSS</option>
<option value="js">JavaScript</option>
</optgroup>
<optgroup label="Back-end">
<option value="php">PHP</option>
<option value="node">Node.js</option>
</optgroup>
</select>Regeln und Fallstricke
labelist erforderlich. Wenn du es weglässt, wird die Gruppe mit einer leeren Überschriftenzeile gerendert und ist ungültiges HTML – die Gruppierung wird sowohl für sehende Benutzer als auch für Hilfstechnologien bedeutungslos. Gib immer eine aussagekräftige Bezeichnung an.- Barrierefreiheit. Screenreader lesen das
labelder Gruppe vor, wenn der Benutzer in die Gruppe wechselt, sodass eine klare Bezeichnung (z. B. „Books", „Front-end") den Benutzern wichtigen Kontext darüber gibt, wo sie sich in der Liste befinden. - Kein Verschachteln. Ein
<optgroup>kann nicht in einem anderen<optgroup>platziert werden. Die Gruppierung ist nur eine Ebene tief; HTML unterstützt keine Untergruppen. - Inkonsistente Styling-Unterstützung. Browser rendern
<optgroup>und<option>mit nativen Betriebssystem-Steuerelementen, daher ist die CSS-Unterstützung sehr begrenzt und inkonsistent. Chrome, Firefox und Safari ignorieren viele Eigenschaften – Hintergründe, Abstände und Schriftarten haben oft keinen Effekt. Das folgende CSS funktioniert möglicherweise in einigen Browsern und wird in anderen vollständig ignoriert, verlasse dich also nicht darauf. Wenn du vollständig gestaltete, gruppierte Listen benötigst, baue stattdessen ein benutzerdefiniertes Widget mit JavaScript, anstatt ein natives<select>zu stylen.
Attribute
| Attribut | Wert | Beschreibung |
|---|---|---|
| disabled | disabled | Gibt an, dass die Auswahl der Gruppenelemente deaktiviert ist. |
| label | text | Definiert eine Bezeichnung für die Gruppe, die als Überschrift in der Dropdown-Liste angezeigt wird. Erforderliches Attribut. |
Das <optgroup>-Tag unterstützt die globalen Attribute und die Ereignisattribute.
Verwandte Tags
<select>– die Dropdown-Liste, die die Gruppen enthält.<option>– die einzelnen Elemente, die durch<optgroup>gruppiert werden.<form>– das Formular, das den ausgewählten Wert übermittelt.
So gestaltet man ein HTML-<optgroup>-Tag
Wie in den Fallstricken oben erwähnt, ist die Browser-Unterstützung für die Gestaltung nativer Formularsteuerelemente begrenzt und inkonsistent. Wo sie unterstützt wird, kannst du CSS wie dieses verwenden, um die Gruppenüberschrift und ihre Optionen anzupassen, aber teste in jedem Zielbrowser, bevor du dich darauf verlässt:
optgroup {
font-weight: bold;
color: #333;
}
optgroup option {
font-weight: normal;
padding-left: 15px;
}