Das select-Element: Die Auswahlliste
Das <select> ist das klassische Dropdown: aufklappen, einen Eintrag wählen, fertig. Die Einträge liefern <option>-Elemente, gruppieren lassen sie sich mit <optgroup>.
Syntax und Beispiel
HTML-Code
<label for="format">Lieblingsformat:</label>
<select id="format" name="format">
<option value="">Bitte wählen</option>
<option value="diskette">Diskette</option>
<option value="cd" selected>CD-ROM</option>
<option value="usb">USB-Stick</option>
</select>So funktionieren die Optionen
Das value-Attribut ist der Wert der beim Absenden übertragen wird, der Text zwischen den Tags ist das was der Nutzer sieht. Fehlt das value, wird der sichtbare Text gesendet. Mit selected markierst du die Vorauswahl, ohne diese Angabe ist automatisch der erste Eintrag gewählt. Deshalb der bewährte Trick mit dem leeren "Bitte wählen" ganz oben: kombiniert mit required am select zwingt er zu einer echten Entscheidng.
Gruppen und Mehrfachauswahl
<select name="element">
<optgroup label="Listen">
<option>ul</option>
<option>ol</option>
</optgroup>
<optgroup label="Medien">
<option>img</option>
<option>video</option>
</optgroup>
</select>Mit dem Attribut multiple erlaubt das select mehrere Einträge gleichzeitig, angezeigt als offene Liste statt Dropdown. Ehrlich gesagt: Die Bedienung mit gedrückter Strg-Taste kennt kaum jemand. Für Mehrfachauswahl sind einzelne Checkboxen fast immer die freundlichere Lösung.
Wann kein select?
Bei zwei bis vier Möglichkeiten sind Radio-Buttons besser: alle Optionen sofort sichtbar, ein Klick weniger. Ein select lohnt ab etwa fünf Einträgen oder wenn der Platz knapp ist. Und bei sehr langen Listen (alle Länder der Welt) leidet die Bedienbarkeit, da hilft die Kombination aus Textfeld und <datalist> mit Vorschlägen, ein Thema für sich.
Typische Fehler
- Kein label am select, "Bitte wählen" ersetzt keine Beschriftung.
- Optionen ohne value wenn der Server feste Werte erwartet.
- Ein select als Navigation missbrauchen, das per JavaScript beim Wählen die Seite wechselt. Dafür gibt es richtige Menüs.