HTML option und optgroup im select-Element

HTML option Tag,  optgroup Tag

option fügt Elemente in eine Select-Auswahl ein. Innerhalb des öffnenden und schließenden select-Elements dürfen beliebig viele option-Elemente eingefügt werden. Mit HTML5 wird das option-Element auch für das datalist-Element benutzt.

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.

18-12-15 SITEMAP CSS HTML JS Basis JS Web Tutorial SVG

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.

Was bekommt der Server?
<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 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>