Multi Select in HTML
Mehrfachauswahl, die auch angesagt wird
Feldname, Beschriftung, Optionsrollen: drei Stellen in der Mehrfachauswahl.
Mehrfachauswahl als System
Zwei Oberflächen, dieselben gesendeten Werte
Sehen Sie zuerst, was eine Person bedient. Verfolgen Sie dann Auswahl, Feldname und Werte bis zu FormData.
Ein kompaktes Steuerelement
select multiple
1 Themen auswählen
Mehrere Einträge: Strg/Cmd oder Umschalt plus Klick. Mit der Tastatur Umschalt plus Pfeiltaste für einen Bereich.
1Namelabel for="themen"
2Mehrfachmodusmultiple size="5"
3Schlüsselname="themen"
Stärke: viele kurze Optionen in begrenzter Höhe. Prüfpunkt: Auswahlgesten unterscheiden sich nach Plattform und Browser.
Mehrere einzelne Steuerelemente
Checkbox-Gruppe
1 Themen auswählen
Wählen Sie alle passenden Themen.
1Gruppennamefieldset + legend
2Einzelnamelabel for="thema-bau"
3Schlüsselname="themen"
Stärke: jede Option und jeder Zustand bleiben sichtbar. Prüfpunkt: eine lange Gruppe braucht gute Gliederung.
Beide Wege treffen hier zusammen
Request-Payload
themen = verkehrthemen = sozialesdaten.getAll('themen')→ ['verkehr', 'soziales']get() liefert nur den ersten passenden Wert. getAll() liefert alle Werte desselben Schlüssels als Array.
Entscheidungshilfe
Welche Oberfläche passt zur Aufgabe?
Sind die Optionen kurz und sollen alle Zustände direkt sichtbar sein?
fieldset und kurze legend; jede Checkbox erhält ein eigenes label.
select multipleAuswahlhinweis sichtbar ergänzen und Bedienung auf den Zielplattformen prüfen.
Eine Listbox kann keine interaktiven Inhalte in Optionen zugänglich abbilden. Prüfen Sie eine Gruppe eigenständiger Steuerelemente.
Native Mehrfachauswahl
<form id="anfrage">
<label for="themen">Themen auswählen</label>
<p id="themen-hinweis">
Mehrere Einträge: Strg/Cmd oder Umschalt
plus Klick. Tastatur: Umschalt plus Pfeiltaste.
</p>
<select id="themen" name="themen" multiple
size="5" aria-describedby="themen-hinweis">
<option value="bau">Bau</option>
<option value="verkehr">Verkehr</option>
<option value="umwelt">Umwelt</option>
<option value="soziales">Soziales</option>
<option value="kultur">Kultur</option>
</select>
</form>Checkbox-Gruppe
<form id="anfrage">
<fieldset>
<legend>Themen auswählen</legend>
<input id="bau" name="themen"
type="checkbox" value="bau">
<label for="bau">Bau</label>
<input id="verkehr" name="themen"
type="checkbox" value="verkehr">
<label for="verkehr">Verkehr</label>
<input id="umwelt" name="themen"
type="checkbox" value="umwelt">
<label for="umwelt">Umwelt</label>
</fieldset>
</form>Alle Werte auslesen
const formular = document.querySelector('#anfrage');
const daten = new FormData(formular);
const themen = daten.getAll('themen');
console.log(themen);Für ausgewählte Beschriftungen eines select steht zusätzlich selectedOptions bereit. Für die gesendeten Werte beider Varianten bleibt FormData.getAll() der gemeinsame Weg.
Aus dem Prüfbericht
Drei Stellen, drei Befunde
Kritisch Die Mehrfachauswahl hat keinen Namen Regel select-name
Der Text über der Liste ist nur ein span. Ein label mit for verbindet ihn mit dem select multiple.
Kritisch Checkbox-Alternative ohne Beschriftung Regel label
Ersetzen Sie die Mehrfachauswahl durch Checkboxen, braucht jedes Kästchen sein eigenes label mit for.
Kritisch Nachgebaute Listbox ohne Optionen Regel aria-required-children
Ein div mit role="listbox" braucht Kinder mit role="option". Ohne sie meldet die Mehrfachauswahl keine Einträge.
Zum Mitnehmen
Die Mehrfachauswahl, korrigiert
Ein label, ein for, und die Optionen bekommen ihre Rolle.
Korrektur in 2 Schritten ansehen
Der Mehrfachauswahl einen Namen geben
Ein label, per for mit dem select verbunden, wird zum Namen der Liste. multiple bleibt, wie es ist.
KorrekturvergleichSchritt 1 · HTML Vorher
<span>Themen auswählen</span> <select name="themen" multiple size="5"> <option value="bau">Bau</option> </select>Nachher
<label for="themen">Themen auswählen</label> <select id="themen" name="themen" multiple size="5"> <option value="bau">Bau</option> </select>Markierte Zeilen wurden geändert
So prüfen Sie es Klicken Sie auf „Themen auswählen“. Springt der Fokus in die Liste, ist der Name verbunden.
Der nachgebauten Liste Optionen geben
Wer die Mehrfachauswahl mit div nachbaut, braucht in der Listbox Kinder mit role="option" und aria-selected.
KorrekturvergleichSchritt 2 · ARIA Vorher
<div role="listbox" aria-label="Themen" aria-multiselectable="true"> <span>Bau</span> <span>Verkehr</span> </div>Nachher
<div role="listbox" aria-label="Themen" aria-multiselectable="true"> <span role="option" aria-selected="false">Bau</span> <span role="option" aria-selected="false">Verkehr</span> </div>Markierte Zeilen wurden geändert
So prüfen Sie es Ein Vorleseprogramm sagt beim Eintritt „Themen, Listenfeld“ und liest dann die einzelnen Optionen.