<option>

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.

Steckbrief <option>

Kategorie: Formulare
Art: Inline
Attribute: 4
Beispiele: 3
Browser: 5 von 5
E-Mail: 0 von 5
Stand: 03.02.2026

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

index.html

Grundsyntax

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

Attribute

4 Attribute

Attribut und Beispiel	Beschreibung
`value` String value="rot"	Der Wert, der beim Absenden des Formulars übermittelt wird. Wenn nicht angegeben, wird der Text-Inhalt der Option verwendet.
`selected` Boolean selected	Markiert diese Option als vorausgewählt, wenn die Seite geladen wird.
`disabled` Boolean disabled	Deaktiviert diese Option, sodass sie nicht ausgewählt werden kann. Oft für Platzhalter-Optionen verwendet.
`label` String label="Wähle eine Farbe"	Ein alternativer Text für die Option. Überschreibt den Text-Inhalt, wird aber selten verwendet.

Beispiele

3 Beispiele

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.

index.html

Optionen mit separatem value

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

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.

index.html

Platzhalter-Option

<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>

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

index.html

Gruppierte 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

4 Fehler

01 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.

02 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.

03 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.

04 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

5 von 5

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

Chrome

Komplett
Firefox

Komplett
Safari

Komplett
Edge

Komplett
Opera

Komplett

Email-Kompatibilität

0 von 5

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

Apple Mail

Keine

Entfernt Formularelemente aus Sicherheitsgründen.
Gmail

Keine

Gmail entfernt select/option-Elemente komplett.
Outlook

Keine

Outlook entfernt Formularelemente vollständig.
Thunderbird

Keine

Formularelemente werden nicht unterstützt.
Yahoo Mail

Keine

Yahoo Mail entfernt Formular-Elemente aus dem HTML.

einmal die Woche, kostenlos

Neue Artikel und Videos, was sich auf der Lernplattform tut, und ab und zu ein Sonderpreis zum Kursstart. Kurz genug, dass du es auch liest.

Zuletzt verschickt · KW 40

Einmal alles neu, und die Lernplattform ist da

<option>

Grundlagen

Syntax

Attribute

Beispiele

Barrierefreiheit

Häufige Fehler

Browser-Kompatibilität

Email-Kompatibilität

Newsletter