<select>
Das <select>-Element erstellt ein Dropdown-Auswahlfeld in Formularen, aus dem Nutzer eine oder mehrere Optionen auswählen können. Es gehört zu den wichtigsten interaktiven Formular-Elementen und wird überall dort eingesetzt, wo aus mehreren vordefinierten Werten gewählt werden soll, von einfachen Länderauswahlen bis hin zu komplexen Filtermenüs. Im Gegensatz zu Radio-Buttons benötigt es deutlich weniger Platz und eignet sich besonders gut für Listen mit vielen Optionen.
- Kategorie
- Formulare
- Art
- Interaktiv
- Attribute
- 7
- Beispiele
- 3
- Browser
- 5 von 5
- 0 von 5
- Stand
- 03.02.2026
Grundlagen
Das <select>-Element funktioniert immer in Kombination mit mindestens einem <option>-Element, das die auswählbaren Werte definiert. Standardmäßig kann nur eine Option ausgewählt werden, aber mit dem multiple-Attribut lässt sich auch eine Mehrfachauswahl ermöglichen. Die ausgewählten Werte werden beim Absenden des Formulars an den Server übertragen.
Ein großer Vorteil von Select-Feldern ist die Möglichkeit, Optionen mit <optgroup> zu gruppieren. Das verbessert die Übersichtlichkeit enorm, wenn du viele Auswahlmöglichkeiten hast, beispielsweise bei der Auswahl von Städten, die nach Ländern gruppiert sind.
Syntax
<label for="city">Stadt wählen:</label>
<select id="city" name="city">
<option value="">-- Bitte wählen --</option>
<option value="berlin">Berlin</option>
<option value="munich">München</option>
<option value="hamburg">Hamburg</option>
</select>Attribute
7 AttributeBeispiele
3 BeispieleDas klassische Dropdown-Menü mit einer einfachen Auswahl. Beachte die leere erste Option als Platzhalter.
<form>
<label for="language">Bevorzugte Programmiersprache:</label>
<select id="language" name="language" required>
<option value="">-- Bitte wählen --</option>
<option value="javascript">JavaScript</option>
<option value="python">Python</option>
<option value="java">Java</option>
<option value="csharp">C#</option>
<option value="php">PHP</option>
</select>
</form>Bei vielen Optionen sorgen Gruppen für bessere Übersichtlichkeit. Besonders nützlich bei geografischen oder kategoriebezogenen Daten.
<form>
<label for="destination">Reiseziel wählen:</label>
<select id="destination" name="destination">
<option value="">-- Bitte wählen --</option>
<optgroup label="Europa">
<option value="berlin">Berlin</option>
<option value="paris">Paris</option>
<option value="london">London</option>
</optgroup>
<optgroup label="Asien">
<option value="tokyo">Tokyo</option>
<option value="bangkok">Bangkok</option>
<option value="singapore">Singapur</option>
</optgroup>
<optgroup label="Amerika">
<option value="new-york">New York</option>
<option value="san-francisco">San Francisco</option>
<option value="toronto">Toronto</option>
</optgroup>
</select>
</form>Mit dem multiple-Attribut können Nutzer mehrere Werte gleichzeitig auswählen. Das Attribut size macht mehrere Optionen direkt sichtbar.
<form>
<label for="skills">Deine Skills (mehrere möglich):</label>
<select id="skills" name="skills" multiple size="6">
<option value="html">HTML</option>
<option value="css">CSS</option>
<option value="javascript">JavaScript</option>
<option value="react">React</option>
<option value="node">Node.js</option>
<option value="python">Python</option>
</select>
<p>Halte Strg (Windows) oder Cmd (Mac) gedrückt für Mehrfachauswahl</p>
</form>Barrierefreiheit
Für barrierefreie Select-Felder ist ein zugeordnetes <label>-Element mit passendem for-Attribut absolut notwendig. Screenreader lesen dann beim Fokussieren des Feldes automatisch das Label vor. Wenn du zusätzliche Hinweise geben willst, nutze aria-describedby, um auf einen Hilfetext zu verweisen.
Die Tastaturnavigation funktioniert bei Select-Feldern standardmäßig gut: Mit Tab kannst du das Feld fokussieren, mit Enter oder Leertaste öffnest du das Dropdown, mit den Pfeiltasten navigierst du durch die Optionen und mit Enter bestätigst du die Auswahl. Bei Multiple-Selects kannst du mit Shift + Pfeiltasten mehrere Optionen markieren.
Vermeide zu viele Optionen ohne Gruppierung: das macht die Navigation mit Screenreadern mühsam. Ab etwa 10 Optionen solltest du über <optgroup> nachdenken oder alternative UI-Patterns wie eine Suche in Betracht ziehen.
Häufige Fehler
4 Fehler01 Fehlender Default-Placeholder
value="" haben. 02 Select ohne Label
<label>-Element mit for-Attribut ist kein optionales Nice-to-have, sondern ein Muss für Barrierefreiheit. Auch wenn du das Label visuell versteckst, muss es im HTML vorhanden sein. 03 Zu viele Optionen ohne Gruppierung
<optgroup>, um zusammengehörige Optionen zu gruppieren. Bei sehr vielen Optionen (über 50) solltest du über alternative Lösungen wie ein Autocomplete-Feld nachdenken. 04 Multiple-Select ohne Hinweis
multiple verwendest, wissen viele Nutzer nicht, dass sie Strg/Cmd gedrückt halten müssen, um mehrere Optionen zu wählen. Füge immer einen sichtbaren Hinweis hinzu oder verwende stattdessen Checkboxen, die intuitiver sind. Browser-Kompatibilität
5 von 5Das select-Element wird von allen Browsern vollständig unterstützt. Das Styling mit CSS ist eingeschränkt, aber die Funktionalität ist überall garantiert.
-
Chrome
Komplett
-
Firefox
Komplett
-
Safari
Komplett
-
Edge
Komplett
-
Opera
Komplett
Email-Kompatibilität
0 von 5Interaktive Formularelemente wie select werden von E-Mail-Clients aus Sicherheitsgründen nicht unterstützt.
-
Apple Mail
Keine
Entfernt Formularelemente aus Sicherheitsgründen.
-
Gmail
Keine
Gmail entfernt select-Elemente komplett aus dem HTML.
-
Outlook
Keine
Outlook entfernt Formularelemente vollständig.
-
Thunderbird
Keine
Formularelemente werden nicht unterstützt.
-
Yahoo Mail
Keine
Yahoo Mail entfernt Formular-Elemente aus dem HTML.
Newsletter
einmal die Woche, kostenlosNeue Artikel und Videos, was sich auf der Lernplattform tut, und ab und zu ein Sonderpreis zum Kursstart. Kurz genug, dass du es auch liest.
Zuletzt verschickt · KW 40
Einmal alles neu, und die Lernplattform ist da