Select in HTML
Ein Auswahlfeld, das seinen Zweck nennt
Beschriftung und Auswahlfeld: zwei Stellen, eine Verbindung.
Auswahlfeld durchleuchtet
Eine Auswahl, drei lesbare Ebenen
Derselbe native Select zeigt Menschen eine Liste, assistiver Technik einen benannten Wert und dem Server ein eindeutiges Datenpaar.
Drei Zustände, ein Feld
required bewertet den gewählten Wert. Die sichtbare Fehlermeldung entsteht erst beim Prüfversuch.
- StartBitte wählen ⌄
Der Wert ist leer. Noch erscheint kein Fehler.
- AbsendenBitte wählen !
Der Browser hält das Formular am Feld an.
- AuswahlHamburg ✓
standort=hamburgkann übermittelt werden.
Wortlaut und Gestaltung des Browserhinweises unterscheiden sich je nach System.
Jedes Attribut hat genau eine Aufgabe
Ähnlich klingende Werte werden an verschiedenen Stellen ausgewertet.
for="standort"passt zuid="standort"verbindet sichtbares Label und Feldname="standort"+value="hamburg"ergibt Schlüssel und Wert für den Serveroptgroup label="Norden"ordnetoptiongliedert Optionen, ist selbst keine Auswahlrequiredprüftvalue=""erkennt die leere Platzhalter-OptionVollständig und ohne Zusatzskript
Die Platzhalter-Option steht zuerst und direkt im select. So greift die eingebaute Prüfung des Browsers bei einer Einfachauswahl mit required.
<form action="/termin" method="post">
<label for="standort">Standort</label>
<select id="standort" name="standort" required>
<option value="">Bitte wählen</option>
<optgroup label="Norden">
<option value="hamburg">Hamburg</option>
<option value="bremen">Bremen</option>
</optgroup>
<optgroup label="Westen">
<option value="koeln">Köln</option>
<option value="essen">Essen</option>
</optgroup>
</select>
<button type="submit">Termin anfragen</button>
</form>Wann der native Select passt
Nutzen: Eine Auswahl aus bekannten Optionen, ohne freie Eingabe oder Filter.
Neu bewerten: Sehr viele Optionen, Mehrfachauswahl oder Suche können ein anderes Muster erfordern.
Nicht nachbauen: Ein ARIA-Combobox-Muster braucht eigene Fokus-, Tastatur- und Statuslogik.
Prüfen Sie die komplette Kette
- Name: Erhält der Select nach einem Klick auf „Standort“ den Fokus?
- Pflichtwert: Stoppt ein leerer Absendeversuch am Feld?
- Gruppen: Sind Gruppen erkennbar, aber nicht auswählbar?
- Payload: Wird nach der Wahl
standort=hamburgübermittelt?
Primärquellen
- WHATWG: The select elementOptionen, Platzhalter und Constraint Validation
- W3C WAI: Labeling ControlsSichtbare Beschriftung und explizite Zuordnung
- W3C: HTML Accessibility API MappingsAbbildung des nativen Select in Accessibility APIs
Aus dem Prüfbericht
Eine Regel, ein Auswahlfeld
Kritisch Das Auswahlfeld hat keinen Namen Regel select-name
Der Text über dem select ist nur ein span. Ein label mit for verbindet ihn mit dem Auswahlfeld.
Zum Mitnehmen
Das Auswahlfeld, korrigiert
Ein label, ein for, eine id. Das Aussehen bleibt.
Korrektur in 2 Schritten ansehen
Dem Auswahlfeld einen Namen geben
Ein label, per for mit dem select verbunden, wird zum Namen des Felds. Der ausgewählte Wert bleibt unverändert.
KorrekturvergleichSchritt 1 · HTML Vorher
<span>Standort</span> <select name="standort"> <option value="berlin">Berlin</option> <option value="koeln">Köln</option> </select>Nachher
<label for="standort">Standort</label> <select id="standort" name="standort"> <option value="berlin">Berlin</option> <option value="koeln">Köln</option> </select>Markierte Zeilen wurden geändert
So prüfen Sie es Klicken Sie auf das Wort „Standort“. Erhält das Auswahlfeld den Fokus, ist der Name verbunden.
Die Pflichtauswahl kennzeichnen
Eine erste Option ohne Wert erzwingt eine bewusste Wahl. required meldet die fehlende Auswahl beim Absenden.
KorrekturvergleichSchritt 2 · HTML Vorher
<select id="standort" name="standort"> <option value="berlin">Berlin</option> </select>Nachher
<select id="standort" name="standort" required> <option value="">Bitte wählen</option> <option value="berlin">Berlin</option> </select>Markierte Zeilen wurden geändert
So prüfen Sie es Senden Sie das Formular ohne Auswahl ab. Der Browser hält an und weist auf das Feld hin.