HTML- <option> -Tag
Beispiel
Eine Dropdown-Liste mit vier Optionen:
<label for="cars">Choose a car:</label>
<select id="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="opel">Opel</option>
<option value="audi">Audi</option>
</select>
Weitere „Probieren Sie es selbst“-Beispiele weiter unten.
Definition und Verwendung
Das <option>Tag definiert eine Option in einer Auswahlliste.
<option>-Elemente gehen in ein <select> -,
<optgroup> - oder <datalist> -Element.
Hinweis: Das <option>Tag kann ohne Attribute verwendet werden, normalerweise benötigen Sie jedoch das value -Attribut, das angibt, was beim Senden des Formulars an den Server gesendet wird.
Tipp: Wenn Sie eine lange Liste von Optionen haben, können Sie verwandte Optionen innerhalb des <optgroup> -Tags gruppieren.
Browser-Unterstützung
| Element | |||||
|---|---|---|---|---|---|
| <option> | Yes | Yes | Yes | Yes | Yes |
Attribute
| Attribute | Value | Description |
|---|---|---|
| disabled | disabled | Specifies that an option should be disabled |
| label | text | Specifies a shorter label for an option |
| selected | selected | Specifies that an option should be pre-selected when the page loads |
| value | text | Specifies the value to be sent to a server |
Globale Attribute
Das <option>Tag unterstützt auch die globalen Attribute in HTML .
Ereignisattribute
Das <option>Tag unterstützt auch die Ereignisattribute in HTML .
Mehr Beispiele
Beispiel
Verwendung von <option> in einem <datalist>-Element:
<label for="browser">Choose your browser from the list:</label>
<input list="browsers" name="browser" id="browser">
<datalist id="browsers">
<option value="Edge">
<option value="Firefox">
<option value="Chrome">
<option value="Opera">
<option value="Safari">
</datalist>
Beispiel
Verwendung von <option> in <optgroup>-Elementen:
<label for="cars">Choose a car:</label>
<select id="cars">
<optgroup label="Swedish Cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
</optgroup>
<optgroup label="German Cars">
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</optgroup>
</select>
Verwandte Seiten
HTML-DOM-Referenz: Optionsobjekt
Standard-CSS-Einstellungen
Keiner.