Stil mit {stil}

Jan 2009

HTML-Tag option • Optionen einer Auswahlliste mit select

Das <option>-Tag fügt Elemente in ein Pulldown- oder Klappmenü ein, das mit einem select-Tag definiert wird. Zwischen das öffnende und schließende select-Tag fürgen beliebig viele Optionen option-Tags eingefügt werden.

Wenn ein Element aus der Liste gewählt wird, wird per Vorgabe der Wert zum Inhalt des Formulars hinzugefügt, der direkt nach dem öffnenden <option>-Tag steht. Durch das value-Attribut kann aber auch ein anderer beliebiger Wert angegeben werden.

Das Tag muss zwischen dem öffnenden und schließenden <select>-Tag stehen. Die Reihenfolge der <option>-Tags bestimmt die Reihenfolge in der Liste. Das selected-Attribut kann allerdings dazu benutzt werden, ein Element anzugeben, das stets als erstes in der Liste steht.

Üblicherweise sollte ein Klappmenü wie ein Menü behandelt werden. Der Text für jeden Eintrag sollte kurz sein, etwa ein bis zwei Worte.

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 in den <option>-Tags aufgeführt sind, und kein Element wird hervorgehoben.

value

wird benutzt, um einen anderen Wert für das Element einzusetzen als den, der im <option>-Tag aufgeführt wird.

Beispiel für option-Tags in einer Auswahlliste

<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> Sahneeis </option>
      <option> Kaugummi </option>
      <option> Pfefferminz </option>
   </optgroup>
</select>

Screenshots

Internet Explorer 7	Firefox 3

HTML-Attribute und Ereignisse für optgroup

Zum Seitenanfang