CSS, HTML und Javascript mit {stil}

HTML select • Auswahlliste in Formularen

Drop Down Auswahlliste mit frommen Wünschen

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 oder mit einem Fingertippen auf Touchscreens. 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).

Select auf mobilen Geräten

Auf den kleinen Monitore der mobilen Geräte mit ein Selectfeld schnell den größten Teil des verfügbaren Platzes ein und der Benutzer sieht nur eine Handvoll der Optionen.

Wenn mehrere Optionen aus einem Auswahlfeld gewählt wurden, wird nach der Auswahl nur die Anzahl der Markierungen gezeigt. Allesamt sind lange Select-Auswahlen in ihrer nativen Form für kleine Monitore nicht gut nutzbar.

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

Checkboxen und Radiobuttons fallen wiederum ohne massiven CSS / Javascript-Einsatz in ihrer nativen Form winzig aus.

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
Identifiziert das Eingabefeld bei der verarbeitenden Anwendung (z.B. einer PHP-Anwendung auf dem Server). Der Name muss (ähnlich wie ein ID-Attribut) 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.
Such was aus Add + Reise zum Mond Rote Winterschuhe Neues iPhone Big Bang Neues Fahrrad 3 Objekte Berlin Düsseldorf Hamburg Osterrode München Vluyn Fertig