<option>: Das HTML-Option-Element
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.
Das <option>- HTML-Element wird verwendet, um ein Element zu definieren, das in einem <select>, einem <optgroup> oder einem <datalist>-Element enthalten ist. Als solches kann <option> Menüeinträge in Popup-Fenstern und anderen Listen von Elementen in einem HTML-Dokument darstellen.
Probieren Sie es aus
<label for="pet-select">Choose a pet:</label> <select id="pet-select"> <option value="">--Please choose an option--</option> <option value="dog">Dog</option> <option value="cat">Cat</option> <option value="hamster">Hamster</option> <option value="parrot">Parrot</option> <option value="spider">Spider</option> <option value="goldfish">Goldfish</option> </select> label { font-family: sans-serif; font-size: 1rem; padding-right: 10px; } select { font-size: 0.9rem; padding: 2px 5px; } Attribute
Dieses Element umfasst die globalen Attribute.
disabled-
Wenn dieses Boolean-Attribut gesetzt ist, kann diese Option nicht ausgewählt werden. Oftmals werden solche Steuerelemente von Browsern ausgegraut und sie erhalten keine Browsereignisse, wie Mausklicks oder fokussierungsbezogene Ereignisse. Wenn dieses Attribut nicht gesetzt ist, kann das Element dennoch deaktiviert sein, wenn einer seiner Vorfahren ein deaktiviertes
<optgroup>-Element ist. label-
Dieses Attribut ist der Text für das Label, das die Bedeutung der Option angibt. Wenn das
label-Attribut nicht definiert ist, entspricht sein Wert dem Textinhalt des Elements. selected-
Wenn vorhanden, gibt dieses Boolean-Attribut an, dass die Option initial ausgewählt ist. Wenn das
<option>-Element ein Nachfolger eines<select>-Elements ist, dessenmultiple-Attribut nicht gesetzt ist, darf nur ein einziges<option>dieses<select>-Elements dasselected-Attribut besitzen. value-
Der Inhalt dieses Attributs stellt den Wert dar, der mit dem Formular übermittelt werden soll, sollte diese Option ausgewählt sein. Wenn dieses Attribut ausgelassen wird, wird der Wert aus dem Textinhalt des Option-Elements entnommen.
Gestaltung mit CSS
Die Gestaltung von <option>-Elementen war historisch gesehen stark eingeschränkt. Anpassbare Select-Elemente erklärt neuere Funktionen, die ihre vollständige Anpassung ermöglichen, genau wie bei jedem regulären DOM-Element.
Legacy-Option-Gestaltung
In Browsern, die die modernen Anpassungsfunktionen nicht unterstützen (oder in alten Codebasen, in denen sie nicht verwendet werden können), hängt die verfügbare Gestaltung von <option>-Elementen vom Browser und Betriebssystem ab. Je nach Betriebssystem wird die font-size des besitzenden <select> in Firefox und Chromium respektiert. Chromium kann zusätzlich color, background-color, font-family, font-variant und text-align zulassen.
Weitere Details zur alten <option>-Gestaltung finden Sie in unserem Leitfaden zur erweiterten Formular-Gestaltung.
Beispiele
Siehe <select> für Beispiele.
Technische Zusammenfassung
| Inhaltskategorien | Keine. |
|---|---|
| Erlaubter Inhalt | In traditionellen <select>-Elementen sind nur Textinhalte erlaubt, möglicherweise mit escapten Zeichen (wie é). In anpassbaren Select-Elementen können <option>-Elemente beliebige Inhalte haben. |
| Tag-Auslassung | Der Start-Tag ist obligatorisch. Der End-Tag ist optional, wenn dieses Element unmittelbar gefolgt wird von einem anderen <option>-Element oder einem <optgroup>, oder wenn das Elternelement keinen weiteren Inhalt hat. |
| Erlaubte Eltern | Ein <select>, ein <optgroup> oder ein <datalist>-Element. |
| Implizite ARIA-Rolle | option |
| Zulässige ARIA-Rollen | Keine role erlaubt |
| DOM-Schnittstelle | [`HTMLOptionElement`](/de/docs/Web/API/HTMLOptionElement) |
Spezifikationen
| Specification |
|---|
| HTML # the-option-element |
Browser-Kompatibilität
Siehe auch
- Andere formularbezogene Elemente:
<form>,<legend>,<label>,<button>,<select>,<datalist>,<optgroup>,<fieldset>,<textarea>,<input>,<output>,<progress>und<meter>. - Anpassbare Select-Elemente