CSS, HTML und Javascript mit {stil}

HTML select • Auswahlliste in Formularen

HTML progress

Das HTML select-Tag erzeugt eine Drop-Down-Liste in einem Formular.

Per Vorgabe erzeugt select ein Fenster mit ausklappenden Optionen in einer Zeile, zeigt eine Option an und lässt die Wahl einer Option zu.

Optional kann das Fenster auch mehrere Zeilen enthalten. Wenn der Besucher das Fenster mit der Maus anklickt, öffnet sich die Liste und klappt alle Auswahlmöglichkeiten auf. Der Besucher wählt einen Eintrag durch einen Klick mit der Maus. Optional kann der Besucher auch mehrere Auswahlen treffen.

<select name="whishlist">
   <option>Reise zum Mond</option>
   <option>Rote Winterschuhe</option>
   <option>Neues iPhone</option>
   <option>Big Bang</option>
   <option>Altes Fahrrad</option>
</select>

Innerhalb der Liste müssen die einzelnen Einträge in option- oder optgroup eingeschlossen werden.

Der Besucher kann alle Optionen beliebig oft auswählen und wieder abwählen.

select mit mehr als einer Option

Das multiple-Attribut erlaubt die Wahl mehrerer Optionen. Mit size="4" wird select zu einem kleinen Fenster und zeigt mehrere Optionen an.

Auswahlliste mit select
<select name="menu[]" multiple="multiple" size="4"> 
    <option value="pizza"> Pizza </option>
    <option value="torte"> Tortelloni </option>
    <option value="bifst"> Bifsteca </option>
    <option value="pfann"> Pfannkuchen </option>
   …
</select> 
Strg/cmd-Taste drücken, um mehrere Gerichte zu wählen

Damit die Anwendung auf dem Server, an die die Formulardaten übermittelt werden, alle gewählten Einträge empfangen kann, ist das Name-Attribut des select-Tags ein PHP-Array (gekennzeichnet durch eine öffnende und schließende eckige Klammer).

Alternative zu select

Anstelle von select kann auch input type="checkbox" oder type="radio" eingesetzt werden. Beides hat den Vorteil, dass der Benutzer alle Optionen gleichzeitig sieht, aber beide Alternativen verbrauchen auch mehr Platz.

<input name="whishlist" type="radio">  Reise zum Mond
<input name="whishlist" type="radio">  Rote Winterschuhe

bzw.

<input name="whishlist[]" type="checkbox">  Reise zum Mond
<input name="whishlist[]" type="checkbox">  Rote Winterschuhe

Kein CSS für select?

Zusammen mit anderen Formular-Elementen widersetzt sich select vielen gewünschten CSS-Eigenschaften. Obendrein sieht select auf jedem System ein wenig anders aus, ist größer oder kleiner.

select verdankt sein Aussehen nicht dem Browser, sondern erbt (genauso wie checkbox und radio-button) vom Betriebssystem.

Attribute für select

autofocus (neu in HTML5)
legt fest, dass dieses Eingabefeld beim Laden der Seite automatisch den Fokus bekommt.
disabled
boolescher Wert. Wenn das Attribut vorhanden ist, wird das Steuerfeld außer Funktion gesetzt. In einigen Browsern wird das Steuerfeld in diesem Fall ausgegraut dargestellt.
form (neu in HTML5)
legt die Formulare fest, zu denen dieses Feld gehört
multiple
erlaubt die Auswahl von einem oder mehreren Elementen der Auswahlliste des Pulldown-Menüs. Als Voreinstellung kann nur ein Wert ausgewählt werden.
name
Zeichenfolge, die ein Steuerfeld in einem Formular mit einem Namen belegt. Der Name muss eindeutig sein und kann nicht erneut im Dokument verwendet werden.
required (neu in HTML5)
gibt an, dass der Benutzer dieses Feld ausfüllen muss
size
zeigt mehr als ein Element gleichzeitig im Pulldown-Menü. Eine Scrollleiste mit Auf- und Abschaltern erlaubt dem Besucher, durch die Liste zu scrollen. Per Vorgabe kann immer nur ein Element in der Liste dargestellt werden.