<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