<select>

Zuletzt aktualisiert am 3. Februar 2026

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.

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

Beispiele

Einfache Auswahl

Das 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>

Gruppierte Optionen mit optgroup

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>

Multiple-Select

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

Fehlender Default-Placeholder: Viele vergessen eine erste leere Option mit einem Platzhalter-Text wie ”— Bitte wählen —”. Ohne diese Option ist beim Laden automatisch die erste echte Option ausgewählt, was oft ungewollt ist und zu Validierungsfehlern führen kann. Die Platzhalter-Option sollte immer value="" haben.

Select ohne Label: Ein Select-Feld ohne zugeordnetes Label ist für Screenreader-Nutzer völlig unverständlich. Das <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.

Zu viele Optionen ohne Gruppierung: Wenn du mehr als 15-20 Optionen hast, wird die Liste schnell unübersichtlich. Nutze <optgroup>, um zusammengehörige Optionen zu gruppieren. Bei sehr vielen Optionen (über 50) solltest du über alternative Lösungen wie ein Autocomplete-Feld nachdenken.

Multiple-Select ohne Hinweis: Wenn du 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

Das select-Element wird von allen Browsern vollständig unterstützt. Das Styling mit CSS ist eingeschränkt, aber die Funktionalität ist überall garantiert.

Email-Kompatibilität

Interaktive Formularelemente wie select werden von E-Mail-Clients aus Sicherheitsgründen nicht unterstützt.

Verwandte Elemente