<option>: Das HTML-Optionselement

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 einen Eintrag in einem <select>, einem <optgroup> oder einem <datalist>-Element zu definieren. Dementsprechend kann <option> Menüeinträge in Popups und anderen Listen von Einträgen 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 boolesche Attribut gesetzt ist, kann diese Option nicht überprüft werden. Oft blenden Browser solche Steuerelemente aus, und sie erhalten keine Browsing-Ereignisse, wie Mausklicks oder solche im Zusammenhang mit dem Fokus. Wenn dieses Attribut nicht gesetzt ist, kann das Element dennoch deaktiviert werden, wenn eines 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 boolesche Attribut an, dass die Option anfänglich ausgewählt ist. Wenn das <option>-Element ein Nachkomme eines <select>-Elements ist, dessen multiple-Attribut nicht gesetzt ist, kann nur ein einzelnes <option> dieses <select>-Elements das selected-Attribut haben.

value

Der Inhalt dieses Attributs repräsentiert den Wert, der mit dem Formular übermittelt werden soll, falls diese Option ausgewählt wird. Wenn dieses Attribut weggelassen wird, wird der Wert aus dem Textinhalt des Optionselements übernommen.

Styling mit CSS

Das Styling von <option>-Elementen war historisch sehr eingeschränkt. Anpassbare Select-Elemente erklären neuere Funktionen, die ihre vollständige Anpassung ermöglichen, ähnlich wie bei jedem regulären DOM-Element.

Veraltetes Option-Styling

In Browsern, die die modernen Anpassungsfunktionen nicht unterstützen (oder in älteren Codebasen, in denen sie nicht verwendet werden können), hängt das Styling, das bei <option>-Elementen verfügbar ist, vom Browser und Betriebssystem ab. Abhängig vom Betriebssystem wird die font-size des enthaltenen <select> in Firefox und Chromium respektiert. Chromium kann zusätzlich color, background-color, font-family, font-variant und text-align zulassen.

Mehr Details zum veralteten <option>-Styling finden Sie in unserem Leitfaden zum erweiterten Formularstyling.

Beispiele

Siehe <select> für Beispiele.

Technische Zusammenfassung

Inhaltskategorien Keine.
Erlaubter Inhalt In traditionellen <select>-Elementen ist nur Textinhalt erlaubt, möglicherweise mit maskierten Zeichen (wie &eacute;). In anpassbaren Select-Elementen können <option>-Elemente beliebigen Inhalt haben.
Tag-Auslassung Der Start-Tag ist zwingend erforderlich. Der End-Tag ist optional, wenn dieses Element direkt von einem anderen <option>-Element oder einem <optgroup> gefolgt wird oder wenn das übergeordnete Element keine weiteren Inhalte hat.
Erlaubte Eltern Ein <select>, ein <optgroup> oder ein <datalist>-Element.
Implizite ARIA-Rolle option
Erlaubte ARIA-Rollen Keine role erlaubt
DOM-Schnittstelle [`HTMLOptionElement`](/de/docs/Web/API/HTMLOptionElement)

Spezifikationen

Specification
HTML
# the-option-element

Browser-Kompatibilität

Siehe auch