HTML select: Dropdowns, Mehrfachauswahl und Formularwerte

HTML <select> ist ein Formularsteuerelement zur Auswahl von Werten aus option-Elementen. Standardmäßig ist eine einzelne Auswahl möglich; multiple ermöglicht mehrere Auswahlen. Das name-Attribut des select-Elements bestimmt den übermittelten Feldnamen, das value-Attribut der ausgewählten option den übermittelten Wert.

Unterscheiden Sie Feldnamen, sichtbare Beschriftungen und übermittelte Werte

Ordnen Sie dem for-Attribut des label-Elements denselben Wert wie dem id-Attribut des select-Elements zu, um die Beschreibung mit dem Steuerelement zu verknüpfen. id identifiziert das Element im Dokument; name ist der Schlüssel der übermittelten Daten. Der sichtbare Optionstext kann von value abweichen: Die Auswahl von Webentwicklung kann web übermitteln. Ohne value wird der Text der option als Wert verwendet.

In einer gewöhnlichen Einzelauswahlsteuerung macht das Weglassen von selected normalerweise die erste verfügbare Option zur anfänglichen Auswahl. Um eine explizite Auswahl zu erzwingen, geben Sie der ersten Option ein leeres value und fügen required hinzu, wie unten gezeigt. Eine sichtbare Anweisung erfüllt die erforderliche Auswahl nicht, wenn ihr Wert leer ist.

Vollständiges Beispiel: erforderliche und Mehrfachauswahlen

Speichern Sie den Code als select-demo.html und öffnen Sie ihn in einem Browser. JavaScript verhindert die Übermittlung und zeigt die aktuellen Formulardaten auf der Seite an. Diese Übung sendet die Daten nicht an einen tatsächlichen Server oder eine externe Website.

<!doctype html>
<html lang="de">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>select-Werte prüfen</title>
  <style>
    body { max-width: 36rem; margin: 1rem auto; padding: 0 1rem; }
    label, select { display: block; margin-bottom: 0.5rem; }
    select, button { font: inherit; max-width: 100%; }
    pre { white-space: pre-wrap; overflow-wrap: anywhere; }
  </style>
</head>
<body>
  <h1>Ausgewählte Werte prüfen</h1>
  <form id="demo">
    <label for="topic">Interessengebiet (Pflichtfeld)</label>
    <select id="topic" name="topic" required>
      <option value="" selected>Thema auswählen</option>
      <optgroup label="Entwicklung">
        <option value="web">Webentwicklung</option>
        <option value="data">Datenverarbeitung</option>
      </optgroup>
    </select>
    <label for="skills">Zu erlernende Technologien (Mehrfachauswahl möglich)</label>
    <select id="skills" name="skills" multiple size="3">
      <option value="html" selected>HTML</option>
      <option value="css" selected>CSS</option>
      <option value="javascript">JavaScript</option>
    </select>
    <label for="locked">Deaktiviertes Feld</label>
    <select id="locked" name="locked" disabled>
      <option value="sample">Nicht änderbar</option>
    </select>
    <button type="submit">Werte anzeigen</button>
    <button type="reset">Zurücksetzen</button>
  </form>
  <pre id="result" aria-live="polite"></pre>
  <script>
    const form = document.getElementById('demo');
    const result = document.getElementById('result');
    form.addEventListener('submit', (event) => {
      event.preventDefault();
      const data = new FormData(form);
      result.textContent = JSON.stringify(Array.from(data.entries()), null, 2);
    });
    form.addEventListener('reset', () => { result.textContent = ''; });
  </script>
</body>
</html>

1. Drücken Sie Werte anzeigen, ohne ein Thema auszuwählen. Die Überprüfung von Pflichtfeldern des Browsers verhindert die Übermittlung.
2. Wählen Sie Webentwicklung aus und drücken Sie Werte anzeigen. Die Ausgabe enthält topic mit web und zwei skills-Einträgen mit html und css. Das deaktivierte locked-Feld wird ausgeschlossen.
3. Ändern Sie die Auswahl der Fähigkeiten und prüfen Sie erneut. Jede ausgewählte Option erzeugt einen weiteren Eintrag namens skills. Wenn Sie alle Optionen abwählen, gibt es möglicherweise keinen skills-Eintrag.
4. Drücken Sie Zurücksetzen. Das Thema kehrt zur leeren Anweisungsoption zurück, die Fähigkeiten kehren zu HTML und CSS zurück, und die Ausgabe wird gelöscht.

multiple und size sind unterschiedliche Attribute

multiple erlaubt mehrere Werte, während size die Anzahl der sichtbaren Zeilen angibt. Das Erhöhen von size aktiviert nicht automatisch die Mehrfachauswahl. Die Tastenkombinationen hängen vom Betriebssystem ab. Desktop-Steuerelemente unterstützen möglicherweise Strg oder Command mit einem Klick oder Shift für die Bereichsauswahl; mobile Geräte können einen separaten Auswahlbildschirm bereitstellen.

Beim Lesen mehrerer Auswahlen in JavaScript liefert select.value nur den zuerst ausgewählten Wert. Iterieren Sie über selectedOptions oder rufen Sie getAll('skills') auf einer FormData-Instanz auf, zum Beispiel new FormData(form).getAll('skills'), um jeden Wert abzurufen. Auf dem Server folgen Sie den Parsing-Regeln Ihres Frameworks für wiederholte Felder mit demselben Namen.

Verwenden Sie disabled, required und selected mit Bedacht

disabled verhindert die Interaktion und schließt das Feld von den übermittelten Daten aus. Ein select hat kein natives Äquivalent zum readonly-Attribut eines input-Elements, deshalb sperrt das Hinzufügen von readonly es nicht. Das Deaktivieren einer Steuerung im Browser ersetzt auch nicht die Autorisierungsprüfungen auf dem Server.

required, disabled, multiple und selected sind boolesche Attribute. Sogar selected="false" lässt das Attribut bestehen, sodass die Option immer noch als anfänglich ausgewählt behandelt werden kann. Entfernen Sie das Attribut oder setzen Sie seine entsprechende JavaScript-Eigenschaft auf false, um es auf falsch zu setzen. Ein Zurücksetzen stellt die anfänglichen in HTML deklarierten Auswahlen wieder her; es löscht nicht unbedingt jede Auswahl.

autofocus kann die Steuerung automatisch fokussieren, aber verwenden Sie sie nur bei Bedarf, unter Berücksichtigung der Position des Lesers und des Verhaltens der mobilen Tastatur. Native Steuerelemente und Popups variieren je nach Browser und Betriebssystem, daher ist es nützlich, label-Assoziationen und die standardmäßige Tastaturinteraktion für gewöhnliche Formulare beizubehalten. Die MDN-Referenz zu select und die MDN-Referenz zu option erklären die detaillierten Regeln.