CSS, HTML und Javascript mit {stil}

HTML option und optgroup im select-Tag

HTML option Tag

option fügt Elemente in eine Select-Auswahl ein. Innerhalb des öffnenden und schließenden select-Tags dürfen beliebig viele option-Tags eingefügt werden. Mit HTML5 wird das option-Tag 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.

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> Dauerregen </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
)

option selected / multiple

Die Reihenfolge der option-Tags 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-Tag 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-Tags aufgeführt sind, und kein Element wird hervorgehoben.
value
übergibt der Anwendung einen Wert anstelle des option-Texts.

option label

<select multiple name="wetterbox">
   <option value="sunny" label="Sonnig"> Mehr als 6 Sonnenstunden </option>
   <option value="cloud" label="Wolkig"> Heiter bis Wolkig </option>
   <option value="rainy" label="Dauerregen" selected> Ab einer bestimmten Niederschlagsmenge</option>
   <option value="snow" label="Schnee"> Mehr als 10 cm Neuschnee </option>
</select>

optgroup Attribute

optgroup zieht eine 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.

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.

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

Mehr zu Formularen