Das<optgroup>-HTML-Element erstellt eine Gruppierung von Optionen innerhalb eines<select>-Elements.

Inanpassbaren<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 imlabel-Attribut des<optgroup>-Elements festgelegt ist, und hat die gleiche Semantik.

Probieren Sie es aus

<label for="dino-select">Choose a dinosaur:</label><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 beinhaltet dieglobalen 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

Spezifikationen

Browser-Kompatibilität

Siehe auch

• Andere formularbezogene Elemente:<form>,<legend>,<label>,<button>,<select>,<datalist>,<option>,<fieldset>,<textarea>,<input>,<output>,<progress> und<meter>.
• Anpassbare select-Elemente