<option>

Zuletzt aktualisiert am 3. Februar 2026

Das <option>-Element definiert eine einzelne Auswahloption innerhalb eines <select>-Dropdown-Menüs. Jede Option kann einen sichtbaren Text für den Nutzer und einen separaten Wert haben, der beim Absenden des Formulars übermittelt wird. Das Element wird immer innerhalb eines <select>-Elements oder eines <datalist>-Elements verwendet.

Grundlagen

Das <option>-Element repräsentiert eine einzelne Auswahl in einem Dropdown-Menü. Der Text zwischen den öffnenden und schließenden Tags ist das, was der Nutzer im Dropdown sieht. Mit dem value-Attribut kannst du einen anderen Wert definieren, der beim Absenden des Formulars übertragen wird.

Du verwendest <option>, wenn du dem Nutzer eine oder mehrere Auswahlmöglichkeiten aus einer vordefinierten Liste anbieten möchtest. Das Element funktioniert nur innerhalb eines <select>-Elements und kann nicht alleine stehen.

Syntax

<select name="farbe">
  <option value="rot">Rot</option>
  <option value="blau">Blau</option>
</select>

Attribute

Beispiele

Einfache Optionen mit value

Der sichtbare Text und der übermittelte Wert können unterschiedlich sein. Das ist nützlich, wenn du intern mit Codes arbeiten möchtest, dem Nutzer aber verständliche Bezeichnungen zeigen willst.

<select name="land">
  <option value="de">Deutschland</option>
  <option value="at">Österreich</option>
  <option value="ch">Schweiz</option>
</select>

Deaktivierte Platzhalter-Option

Eine häufige Pattern ist eine deaktivierte, vorausgewählte Platzhalter-Option, die dem Nutzer zeigt, was er auswählen soll. Das hidden-Attribut versteckt sie zusätzlich aus der Liste, sobald der Nutzer eine andere Option wählt.

<select name="stadt">
  <option value="" disabled selected hidden>Wähle deine Stadt</option>
  <option value="berlin">Berlin</option>
  <option value="hamburg">Hamburg</option>
  <option value="muenchen">München</option>
</select>

Optionen in Gruppen

Mit dem <optgroup>-Element kannst du Optionen logisch gruppieren und mit einer Überschrift versehen. Das verbessert die Übersichtlichkeit bei vielen Optionen.

<select name="essen">
  <optgroup label="Obst">
    <option value="apfel">Apfel</option>
    <option value="banane">Banane</option>
  </optgroup>
  <optgroup label="Gemüse">
    <option value="karotte">Karotte</option>
    <option value="tomate">Tomate</option>
  </optgroup>
</select>

Barrierefreiheit

Screenreader lesen den Text-Inhalt der Option sowie ihren ausgewählten oder deaktivierten Status vor. Der value-Wert wird nicht vorgelesen, daher sollte der sichtbare Text aussagekräftig sein.

Wenn du eine Platzhalter-Option verwendest, stelle sicher, dass sie mit disabled markiert ist, damit sie nicht als gültige Auswahl gilt. Das hidden-Attribut ist optional, aber es verhindert, dass die Option nach der ersten Auswahl wieder in der Liste erscheint.

Bei sehr langen Listen empfiehlt sich die Verwendung von <optgroup>, um die Optionen zu strukturieren. Screenreader geben die Gruppenüberschrift mit an, was die Navigation erleichtert.

Häufige Fehler

value-Attribut vergessen: Wenn du kein value-Attribut angibst, wird der Text-Inhalt der Option als Wert verwendet. Das ist nicht immer ein Problem, kann aber zu Problemen führen, wenn der Text Sonderzeichen, Leerzeichen oder Umlaute enthält. Besser ist es, einen expliziten, maschinenlesbaren Wert anzugeben.

Leere Option ohne disabled: Viele Entwickler erstellen eine leere erste Option wie <option value="">Bitte wählen</option>, vergessen aber das disabled-Attribut. Dadurch kann der Nutzer diese “Nicht-Auswahl” absenden, was zu Validierungsproblemen führt. Verwende immer disabled selected hidden für Platzhalter-Optionen.

Zu viele Optionen ohne Gruppierung: Wenn du mehr als 10-15 Optionen hast, wird das Dropdown schnell unübersichtlich. Verwende <optgroup>, um verwandte Optionen zu gruppieren, oder überlege, ob ein Textfeld mit Auto-Vervollständigung die bessere Wahl wäre.

selected bei mehreren Optionen: In einem normalen <select> ohne multiple-Attribut sollte nur eine Option das selected-Attribut haben. Wenn mehrere Optionen selected sind, wird meist die letzte ausgewählt, aber das Verhalten kann zwischen Browsern variieren.

Browser-Kompatibilität

Das option-Element wird von allen Browsern seit den Anfängen des Webs vollständig unterstützt. Alle Attribute (value, selected, disabled) funktionieren konsistent.

Email-Kompatibilität

Interaktive Formularelemente wie option und select werden in E-Mail-Clients aus Sicherheitsgründen nicht unterstützt.

Verwandte Elemente