<option> HTML-Optionselement

Baseline Weitgehend verfügbar

Diese Funktion ist gut etabliert und funktioniert auf vielen Geräten und in vielen Browserversionen. Sie ist seit Juli 2015 browserübergreifend verfügbar.

Das <option>-Element in HTML wird verwendet, um ein Element in einem <select>, einem <optgroup> oder einem <datalist>-Element zu definieren. Somit kann <option> Menüelemente in Popups und andere Listen von Elementen in einem HTML-Dokument darstellen.

In diesem Artikel

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 beinhaltet die globalen Attribute.

disabled

Wenn dieses boolesche Attribut gesetzt ist, ist diese Option nicht auswählbar. Oftmals werden solche Steuerelemente von Browsern grau dargestellt und erhalten keine Navigationsereignisse, wie Mausklicks oder Fokusereignisse. Ist dieses Attribut nicht gesetzt, kann das Element dennoch deaktiviert sein, wenn ein übergeordnetes <optgroup>-Element deaktiviert ist.

label

Dieses Attribut ist ein Text für das Label, das die Bedeutung der Option angibt. Ist das label Attribut nicht definiert, entspricht sein Wert dem Textinhalt des Elements.

selected

Wenn vorhanden, zeigt dieses boolesche Attribut an, dass die Option initial ausgewählt ist. Wenn das <option>-Element ein Nachkomme eines <select>-Elements ist, dessen multiple Attribut nicht gesetzt ist, darf nur ein einziges <option> dieses <select>-Elements das selected Attribut haben.

value

Der Inhalt dieses Attributs stellt den Wert dar, der mit dem Formular übermittelt werden soll, wenn diese Option ausgewählt wurde. Ist dieses Attribut weggelassen, wird der Wert aus dem Textinhalt des Optionselements genommen.

Styling mit CSS

Das Styling von <option>-Elementen war historisch gesehen sehr eingeschränkt. Customizable select elements erklärt neuere Funktionen, die ihre vollständige Anpassung ermöglichen, genauso wie bei jedem regulären DOM-Element.

Legacy-Optionen-Styling

In Browsern, die die modernen Anpassungsfunktionen nicht unterstützen (oder in älteren Codebasen, wo sie nicht verwendet werden können), hängt das verfügbare Styling von <option>-Elementen vom Browser und Betriebssystem ab. Abhängig vom 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 erlauben.

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

Beispiele

Siehe <select> für Beispiele.

Technische Zusammenfassung

Inhaltskategorien Erlaubter Inhalt Tag-Auslassung Erlaubte Eltern Implizierte ARIA-Rolle Erlaubte ARIA-Rollen DOM-Schnittstelle

Keine.

In traditionellen <select>-Elementen ist nur Textinhalt erlaubt, möglicherweise mit escape-Zeichen (wie é). In anpassbaren Select-Elementen können <option>-Elemente beliebigen Inhalt haben.

Das Start-Tag ist obligatorisch. Das End-Tag ist optional, wenn dieses Element unmittelbar von einem anderen <option>-Element oder einem <optgroup> gefolgt wird, oder wenn das übergeordnete Element keinen weiteren Inhalt hat.

Ein <select>, ein <optgroup> oder ein <datalist>-Element.

option

Keine role erlaubt

[`HTMLOptionElement`](/de/docs/Web/API/HTMLOptionElement)

Andere form-bezogene Elemente: <form>, <legend>, <label>, <button>, <select>, <datalist>, <optgroup>, <fieldset>, <textarea>, <input>, <output>, <progress> und <meter>.
Customizable select elements

Help improve MDN

War diese Übersetzung hilfreich?

Ja Nein

Erfahren Sie, wie Sie beitragen können Diese Seite wurde automatisch aus dem Englischen übersetzt.

Übersetzung auf GitHub anzeigen • Fehler mit dieser Übersetzung melden