HTML select mit Optionen
Die Optionen einer Select-Liste sollten wie ein Menü behandelt werden: den Text für jeden Eintrag mit ein bis zwei Wörtern kurz halten.
<select> <option> Sonnenschein </option> <option> Wolken </option> <option> Sommerregen </option> <option> Schnee </option> </select>
option value
Wenn ein Element aus der Liste gewählt wird, wird per Vorgabe der Wert, der direkt nach dem öffnenden option-Tag steht, zum Inhalt des Formulars hinzugefügt.
Wenn kein value-Attribut vorhanden ist, überträgt das Formular direkt den Text zwischen dem öffnenden und schließenden option-Tag. Durch das value-Attribut kann aber auch ein beliebiger anderer Wert angegeben werden – meist, um der Anwendung einfache Werte zu übergeben (z.B. "de" anstelle von "Europe/Berlin").
<select multiple name="wetterbox">
<option value="sunny"> ☀ Sonnenschein </option>
<option value="cloud"> ☁ Wolken </option>
<option value="rainy" selected> ☂ Dauerregen</option>
<option value="snow"> ☃ Schnee </option>
</select>
Ohne value-Attribut würden die Sonderzeichen der Formular-Anwendung Probleme bereiten: Lieber ein value-Attribut ins option-Tag, dann empfängt die Anwendung das Wertepaar:
Array (
[wetterbox] => rainy
)
HTML Select option mit label-Attribut
Ein label-Attribut in einem option-Tag stellt eine Kurzfassung des option-Tags dar. Wenn ein label-Attribut im option-Tag aufgeführt ist, sollen die Browser den Wert des label-Attributs anstelle des option-Texts benutzen.
<label for="wetterbox">Such dir dein Urlaubswetter aus</label> <select id="wetterbox" class="wetterbox" size="4"> <option label="Sonnig"> Mehr als 6 Sonnenstunden </option> <option label="Wolkig"> Heiter bis Wolkig </option> <option label="Sommerregen" selected> Ab einer bestimmten Niederschlagsmenge</option> <option label="Schnee"> Mehr als 10 cm Neuschnee </option> </select>
An die Anwendung geht der Text zwischen den option-Tags, weil kein value-Attribut vorhanden ist.
option selected / multiple
Die Reihenfolge der option-Elemente bestimmt die Reihenfolge in der Liste. Das selected-Attribut gibt Element vor, das stets als erstes in der Liste angezeigt wird, gleich an welcher Position das jeweilige option-Element steht.
"multiple" öffnet ein Fenster anstelle der einzeiligen Darstellung und zeigt mehrere Optionen gleichzeitig.
Attribute für option
- disabled
- ist ein boolescher Wert. Wenn das Attribut vorhanden ist, deaktiviert es die Option des select-Elements. Einige Browser rendern die Option dann ausgegraut.
- label
- erzeugt eine Kurzfassung des Textes, der nach dem öffnenden option-Tag steht.
- selected
- gibt an, welcher Eintrag des Klappmenüs ganz oben in der Liste stehen soll. Einige Browser stellen das gewählte Element auch herausgehoben dar. Per Vorgabe werden die Elemente in der Liste in der gleichen Reihenfolge dargestellt, in der sie innerhalb der option-Elements aufgeführt sind, und kein Element wird hervorgehoben.
- value
- übergibt der Anwendung einen Wert anstelle des option-Texts.
optgroup Attribute
optgroup gruppiert verwandte Optionen einer Select-Liste und erzeugt eine hierarchische Struktur. Die Struktur sorgt in langen Listen von Optionen für eine bessere Übersicht.
optgroup zieht eine zusätzliche Ebene in lange select-Listen mit vielen Optionen. Eine tiefere Verschachtelung ist nicht möglich.
- disabled
- boolescher Wert, der eine Gruppe von Einträgen außer Funktion setzt. Das Attribut wird von allen modernen Browsern unterstützt, von IE aber erst ab Version 8.
- label
- erzeugt eine kurze Beschreibung der jeweiligen Gruppe und ist ein erforderliches Attribut.
Beispiel: option-Tags in einer Selectliste
Die Darstellung der Optionen einer Select-Liste scheint in Stein gemeisselt, aber mit einem multiple im option-Tag wirkt CSS.
Ohne multiple
Mit multiple
<select name="select">
<optgroup label="Italienische Gerichte">
<option> Pizza </option>
<option> Tortelloni </option>
<option> Bifsteca </option>
</optgroup>
<optgroup label="Deutsche Gerichte">
<option> Pfannkuchen </option>
<option> Tafelspitz </option>
<option> Fischstäbchen </option>
</optgroup>
<optgroup label="Süssigkeiten" disabled="disabled">
<option> Schokoriegel </option>
<option> Kaugummi </option>
<option> Pfefferminz </option>
</optgroup>
</select>
