<optgroup>: Das Option-Group-Element
Baseline Widely available *
This feature is well established and works across many devices and browser versions. It’s been available across browsers since Juli 2015.
* Some parts of this feature may have varying levels of support.
Das <optgroup>-HTML-Element erstellt eine Gruppierung von Optionen innerhalb eines <select>-Elements.
In anpassbaren <select>-Elementen ist das <legend>-Element als Kindelement von <optgroup> erlaubt, um ein leicht anzuzielendes und zu stylendes Label bereitzustellen. Dies ersetzt jeden Text, der im label-Attribut des <optgroup>-Elements festgelegt ist, und hat die gleiche Semantik.
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; } Hinweis: Optgroup-Elemente dürfen nicht verschachtelt werden.
Attribute
Dieses Element beinhaltet die globalen Attribute.
disabled-
Wenn dieses Boolean-Attribut gesetzt ist, kann keiner der Artikel in dieser Optionsgruppe ausgewählt werden. Häufig grauen Browser solche Steuerelemente aus, und sie erhalten keine Browsing-Ereignisse, wie Mausklicks oder Fokussierungsereignisse.
label-
Der Name der Optionsgruppe, der vom Browser verwendet werden kann, um die Optionen in der Benutzeroberfläche zu beschriften. Dieses Attribut ist obligatorisch, wenn dieses Element verwendet wird.
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. |
|---|---|
| Erlaubter Inhalt | Null oder mehr <option>-Elemente. In anpassbaren select-Elementen ist ein <legend>-Element als Kindelement von <optgroup> erlaubt. |
| Tag-Auslassung | Das Start-Tag ist obligatorisch. Das End-Tag ist optional, wenn dieses Element unmittelbar von einem anderen <optgroup>-Element oder keinem weiteren Inhalt des Elternelements gefolgt wird. |
| Erlaubte Eltern | Ein <select>-Element. |
| Implizite ARIA-Rolle | group |
| Erlaubte ARIA-Rollen | Keine role erlaubt |
| DOM-Schnittstelle | [`HTMLOptGroupElement`](/de/docs/Web/API/HTMLOptGroupElement) |
Spezifikationen
| Specification |
|---|
| HTML # the-optgroup-element |
Browser-Kompatibilität
Loading…
Siehe auch
- Andere formularbezogene Elemente:
<form>,<legend>,<label>,<button>,<select>,<datalist>,<option>,<fieldset>,<textarea>,<input>,<output>,<progress>und<meter>. - Anpassbare select-Elemente