HTML `<option>`-Element

Das <option>-Tag definiert Einträge in einer Dropdown-Liste, die durch das <select>-Tag definiert wird, oder die Einträge der Datenliste für die Autovervollständigung, die durch das <datalist>-Tag definiert wird. Das <option>-Tag kann als untergeordnetes Element des <select>-Tags, <datalist>-Tags oder <optgroup>-Tags verwendet werden, das die Listenelemente gruppiert.

Umgeben Sie das <select>-Tag nur dann mit einem <form>-Element, wenn Sie die ausgewählten Daten an einen Server senden oder über Skripte darauf zugreifen müssen.

Syntax

Das <option>-Tag kann als öffnendes und schließendes Tag-Paar oder als selbstschließendes Tag geschrieben werden. Wenn es als Paar verwendet wird, wird der angezeigte Text zwischen dem öffnenden (<option>) und dem schließenden (</option>) Tag geschrieben.

Erfolg
Das <option>-Tag wird in der Regel mit dem Attribut value verwendet, um anzugeben, welcher Wert zur weiteren Verarbeitung an den Server gesendet werden soll.

Beispiel für das HTML `<option>`-Tag:

Eine Dropdown-Liste mit einem HTML <option>-Tag

html

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <form>
      <select>
        <option value="computers">Computer</option>
        <option value="notebook">Notebook</option>
        <option value="tablet">Tablet</option>
      </select>
    </form>
  </body>
</html>

Try it Yourself »

Ergebnis

Computer Notebook Tablet ---

Beispiel für das HTML `<option>`-Tag mit dem `<datalist>`-Tag.

Liste der Abflughäfen mit option-Tag

html

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <p>Departure airport:</p>
    <form action="action_form.php" method="get">
      <input type="text" list="airports" name="airports" />
      <datalist id="airports">
        <option>Birmingham</option>
        <option>Cambridge</option>
        <option>Oxford</option>
        <option>Bangor</option>
      </datalist>
      <input type="submit" value="confirm" />
    </form>
  </body>
</html>

Try it Yourself »

In diesem Beispiel werden die <option>-Tags innerhalb des <datalist>-Tags ohne das value-Attribut platziert, da der Textinhalt als Autovervollständigungsvorschlag dient.

Ergebnis

---

Attribute

Attribut	Wert	Beschreibung
disabled	disabled	Gibt an, dass die Elementauswahl deaktiviert ist.
label	text	Definiert einen Namen für ein Listenelement.
selected	selected	Legt fest, dass die Option beim Laden der Seite standardmäßig ausgewählt sein muss.
value	text	Definiert den Wert, der an den Server gesendet wird.

Das <option>-Tag unterstützt die Globalen Attribute und die Ereignisattribute.

Beispiel mit den Attributen selected und disabled:

html

<select>
  <option value="red">Red</option>
  <option value="blue" selected>Blue</option>
  <option value="green" disabled>Green</option>
</select>

Praxis

Welche Eigenschaften und Verwendungszwecke hat das HTML <option>-Tag?

Es definiert eine Dropdown-ListeEs kann nicht innerhalb von <select>, <optgroup> und <datalist>-Elementen verwendet werdenEs verfügt über die Attribute required und selectedEs unterstützt keine globalen AttributeEs kann nicht verwendet werden, um eine Option in einer Dropdown-Liste zu definieren

HTML <option>-Element ​

Syntax ​

Beispiel für das HTML <option>-Tag: ​

Ergebnis ​

Beispiel für das HTML <option>-Tag mit dem <datalist>-Tag. ​

Ergebnis ​

Attribute ​

Praxis ​

HTML `<option>`-Element

Syntax

Beispiel für das HTML `<option>`-Tag:

Ergebnis

Beispiel für das HTML `<option>`-Tag mit dem `<datalist>`-Tag.

Ergebnis

Attribute

Praxis