HTML-Element <optgroup> für Optionsgruppen
Baseline
Weitgehend verfügbar
*
Diese Funktion ist gut etabliert und funktioniert auf vielen Geräten und in vielen Browserversionen. Sie ist seit Juli 2015 browserübergreifend verfügbar.
* Einige Teile dieser Funktion werden möglicherweise unterschiedlich gut unterstützt.
Das HTML-Element <optgroup> gruppiert Optionen innerhalb eines <select>-Elements.
Probieren Sie es aus
<label for="dino-select">Choose a dinosaur:</label>
<select id="dino-select">
<optgroup label="Theropods">
<option>Tyrannosaurus</option>
<option>Velociraptor</option>
<option>Deinonychus</option>
</optgroup>
<optgroup label="Sauropods">
<option>Diplodocus</option>
<option>Saltasaurus</option>
<option>Apatosaurus</option>
</optgroup>
</select>
label {
display: block;
margin-bottom: 10px;
}
Attribute
Dieses Element unterstützt die globalen Attribute.
disabled-
Wenn dieses boolesche Attribut gesetzt ist, kann keines der Elemente dieser Optionsgruppe ausgewählt werden. Browser stellen eine solche Gruppe häufig ausgegraut dar; sie empfängt dann keine Interaktionsereignisse wie Mausklicks oder Fokusereignisse.
label-
Der Name der Optionsgruppe, den der Browser zur Beschriftung der Optionen in der Benutzeroberfläche verwenden kann. Dieses Attribut ist erforderlich, wenn das Element verwendet wird.
Verwendungshinweise
<optgroup>-Elemente dürfen nicht verschachtelt werden.
In anpassbaren <select>-Elementen ist das <legend>-Element als Kindelement von <optgroup> zulässig. Es stellt eine Beschriftung bereit, die sich leicht gezielt auswählen und gestalten lässt. Diese ersetzt einen im label-Attribut des <optgroup>-Elements angegebenen Text und hat dieselbe Semantik.
Beispiele
<select>
<optgroup label="Group 1">
<option>Option 1.1</option>
</optgroup>
<optgroup label="Group 2">
<option>Option 2.1</option>
<option>Option 2.2</option>
</optgroup>
<optgroup label="Group 3" disabled>
<option>Option 3.1</option>
<option>Option 3.2</option>
<option>Option 3.3</option>
</optgroup>
</select>
Ergebnis
Technische Zusammenfassung
| Inhaltskategorien | Keine. |
|---|---|
| Zulässiger Inhalt | Null oder mehr <option>-Elemente. In anpassbaren select-Elementen ist ein <legend>-Element als Kindelement von <optgroup> zulässig. |
| Weglassen von Tags |
Das Start-Tag ist erforderlich. Das End-Tag ist optional, wenn auf dieses Element
unmittelbar ein weiteres <optgroup>-Element folgt oder
das Elternelement keinen weiteren Inhalt hat.
|
| Zulässige Elternelemente | Ein <select>-Element. |
| Implizite ARIA-Rolle | group |
| Zulässige ARIA-Rollen | Keine role zulässig |
| DOM-Schnittstelle | [`HTMLOptGroupElement`](/de/docs/Web/API/HTMLOptGroupElement) |
Spezifikationen
| Spezifikation |
|---|
| HTML # the-optgroup-element |
Browser-Kompatibilität
Siehe auch
- Weitere formularbezogene Elemente:
<form>,<legend>,<label>,<button>,<select>,<datalist>,<option>,<fieldset>,<textarea>,<input>,<output>,<progress>und<meter>. - Anpassbare select-Elemente