HTML <option>-Tag
Der <option>-Tag definiert Einträge in Dropdown-Listen. Beschreibung, Attribute und Verwendungsbeispiele.
Der <option>-Tag definiert einen einzelnen Eintrag in einer Dropdown-Liste, die mit dem <select>-Tag erstellt wird, oder einen Autovervollständigungsvorschlag innerhalb eines <datalist>-Elements. Er kann als Kind-Element von <select>, <datalist> oder einem <optgroup>-Element erscheinen, das zusammengehörige Optionen gruppiert.
Jedes <option>-Element hat zwei unterschiedliche Daten: den Text, den der Benutzer sieht, und den Wert, der beim Absenden übertragen wird. Den Unterschied zwischen diesen beiden zu verstehen ist der Schlüssel zur korrekten Verwendung dieses Tags — das wird weiter unten ausführlich erläutert.
Syntax
Der <option>-Tag kann als Tagpaar oder als selbstschließendes Tag geschrieben werden. Wenn er als Tagpaar verwendet wird, steht der Anzeigetext zwischen dem öffnenden (<option>) und dem schließenden (</option>) Tag.
Der <option>-Tag wird in der Regel zusammen mit dem value-Attribut verwendet, um anzugeben, welcher Wert zur weiteren Verarbeitung an den Server gesendet werden soll.
Beispiel des HTML-<option>-Tags:
Eine Dropdown-Liste mit dem HTML-<option>-Tag
<!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>Das <select>-Element ist hier von einem <form>-Tag umschlossen, da die Dropdown-Liste an einen Server übermittelt werden soll. Ein <select> funktioniert auch ohne Formular für rein clientseitiges Scripting, aber man benötigt ein Formular (oder JavaScript), um den ausgewählten Wert tatsächlich irgendwohin zu senden.
Das value-Attribut und seine Tücke
Das value-Attribut enthält die Daten, die beim Auswählen einer Option übertragen werden. Der Text zwischen den Tags ist nur das, was der Benutzer sieht — er muss nicht mit dem Wert übereinstimmen.
Wenn man value weglässt, sendet der Browser stattdessen den Textinhalt der Option. Diese beiden Optionen verhalten sich beim Absenden identisch:
<!-- value omitted: the text "Tablet" is submitted -->
<option>Tablet</option>
<!-- value present: "tablet" is submitted, "Tablet" is shown -->
<option value="tablet">Tablet</option>Das ist praktisch, aber auch eine häufige Fehlerquelle: Wenn man später den sichtbaren Text einer Option ohne value ändert (für Übersetzungen, Großschreibung oder Formulierung), ändert sich auch der Wert, den der Server empfängt. Für vorhersehbare und stabile Übertragungen sollte man immer einen expliziten value festlegen.
Beispiel des HTML-<option>-Tags mit dem <datalist>-Tag.
Liste der Abflughäfen mit dem option-Tag
<!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>In diesem Beispiel werden die <option>-Tags ohne das value-Attribut innerhalb des <datalist>-Tags platziert, da der Textinhalt als Autovervollständigungsvorschlag dient.
Attribute
| Attribut | Wert | Beschreibung |
|---|---|---|
| disabled | disabled | Gibt an, dass die Auswahl des Elements deaktiviert ist. |
| label | text | Definiert einen Namen für einen Listeneintrag. |
| 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. |
Der <option>-Tag unterstützt die globalen Attribute und die Ereignis-Attribute.
Die Attribute selected und disabled
selected kennzeichnet die Option, die beim Laden der Seite vorausgewählt ist. disabled macht eine Option sichtbar, aber nicht auswählbar (sie erscheint ausgegraut). In diesem Beispiel ist Blau standardmäßig ausgewählt und Grün kann nicht gewählt werden:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<select>
<option value="red">Red</option>
<option value="blue" selected>Blue</option>
<option value="green" disabled>Green</option>
</select>
</body>
</html>Eine Platzhalter-Option
Ein <select> zeigt standardmäßig immer seine erste Option an, daher gibt es keinen eingebauten „Platzhalter" wie bei einem Texteingabefeld. Das gängige Muster besteht darin, eine erste Option hinzuzufügen, die leer, disabled und selected ist. Sie fordert den Benutzer auf, eine Auswahl zu treffen, kann nicht als echter Wert übermittelt werden und kann nicht erneut ausgewählt werden, sobald der Benutzer etwas anderes gewählt hat:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<label for="size">Pick a size:</label>
<select id="size" name="size" required>
<option value="" disabled selected>Choose one</option>
<option value="s">Small</option>
<option value="m">Medium</option>
<option value="l">Large</option>
</select>
</body>
</html>Das required-Attribut gehört zum <select>-Element, nicht zu <option>. Da der obige Platzhalter einen leeren value hat, kann das Formular erst abgesendet werden, wenn der Benutzer eine echte Option ausgewählt hat.
Eine ganze Gruppe deaktivieren
Das disabled-Attribut funktioniert auch auf einem <optgroup>-Element, wodurch alle darin enthaltenen Optionen auf einmal deaktiviert werden — nützlich, um Kategorien anzuzeigen, die vorübergehend nicht verfügbar sind:
<select>
<optgroup label="In stock">
<option value="apple">Apple</option>
<option value="pear">Pear</option>
</optgroup>
<optgroup label="Out of stock" disabled>
<option value="mango">Mango</option>
<option value="kiwi">Kiwi</option>
</optgroup>
</select>Das label-Attribut
Das label-Attribut bietet eine alternative Beschriftung für die Option. Wenn label gesetzt ist, zeigen Browser es anstelle des Textinhalts an. Wird label weggelassen, wird der Text zwischen den Tags als Beschriftung verwendet — weshalb es normalerweise weggelassen und der sichtbare Text direkt geschrieben wird.
<select>
<!-- The user sees "Cat", not "Felis catus" -->
<option value="cat" label="Cat">Felis catus</option>
<option value="dog">Dog</option>
</select>In der Praxis benötigt man label bei einem einfachen <option> selten; es ist am sinnvollsten bei einem <optgroup>, wo label die Gruppenüberschrift benennt.