HTML <select>-Tag
Das HTML <select>-Tag erstellt eine Dropdown-Liste mit <option>-Einträgen. Lernen Sie Attribute, Beschriftung, multiple, size, required und Platzhalter-Muster kennen.
Das HTML-<select>-Tag erstellt eine Dropdown-Liste mit Optionen. Der Benutzer klickt auf das Steuerelement, die Liste öffnet sich, und er wählt einen Wert (oder mehrere, mit dem Attribut multiple). Es ist eines der grundlegenden Formularsteuerelemente und wird für alles verwendet – von Länderauswahlen bis hin zu Sortiermenüs.
Diese Seite behandelt die Syntax, alle Attribute, Barrierefreiheit (Beschriftung), das Verhalten von multiple / size / required, das Deaktiviert-Platzhalter-Muster und den Unterschied zwischen <select> und einer <datalist>-gestützten Eingabe.
Das <option>-Tag definiert jede Auswahlmöglichkeit und befindet sich innerhalb des <select>. Standardmäßig ist die erste Option vorausgewählt; fügen Sie einer Option das Attribut selected hinzu, um eine andere vorzuselektieren. Verwenden Sie <optgroup>, um zusammengehörige Optionen unter einer fetten, nicht auswählbaren Überschrift zu gruppieren.
Um den gewählten Wert zu übermitteln, geben Sie dem <select> ein name-Attribut und platzieren Sie es innerhalb eines <form>-Elements (oder verknüpfen Sie es mit einem über das form-Attribut). Der an den Server gesendete Wert ist der value der ausgewählten Option.
Wenn Sie die Daten an den Server senden oder die Liste per Skript auslesen möchten, sollte das <select>-Element einen name haben und einem <form> zugeordnet sein.
<select> immer beschriften
Ein <select> ohne Beschriftung gibt dem Benutzer keinen Text, der beschreibt, was er auswählt, und Screenreader kündigen nichts Sinnvolles an. Verknüpfen Sie es immer mit einem <label>: Setzen Sie eine id am <select> und weisen Sie das for-Attribut des Labels auf diese id. So kann der Benutzer auch auf den Label-Text klicken, um das Steuerelement zu fokussieren.
Beispiel eines beschrifteten <select>
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<label for="topic">Choose a topic:</label>
<select id="topic" name="topic">
<option value="html">HTML</option>
<option value="css">CSS</option>
<option value="js">JavaScript</option>
</select>
</body>
</html>Wenn eine sichtbare Beschriftung nicht möglich ist, verwenden Sie alternativ aria-label="..." am <select>, damit unterstützende Technologien den Zweck des Elements weiterhin ankündigen.
Syntax
Der <select>-Tag wird paarweise verwendet. Der Inhalt wird zwischen dem öffnenden (<select>) und schließenden (</select>) Tag geschrieben.
Beispiel des HTML-<select>-Tags:
Beispiel des HTML-<select>-Tags
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<form>
<select>
<option value="books">Books</option>
<option value="html">HTML</option>
<option value="css">CSS</option>
<option value="php">PHP</option>
<option value="js">JavaScript</option>
</select>
</form>
</body>
</html>Beispiel des HTML-<select>-Tags mit dem <optgroup>-Tag:
Beispiel des HTML-<select>-Tags mit <optgroup>-Tag
<!DOCTYPE html>
<html>
<head>
<title>Window title of the page</title>
</head>
<body>
<select aria-label="Books and Snippets">
<optgroup label="Books">
<option value="html">HTML</option>
<option value="css">CSS</option>
</optgroup>
<optgroup label="Snippets">
<option value="git">Git</option>
<option value="java">Java</option>
</optgroup>
</select>
</body>
</html>In diesem Beispiel wird der <optgroup>-Tag verwendet, um die Optionen in Gruppen zusammenzufassen.
Mehrere Optionen auswählen
Fügen Sie das boolean-Attribut multiple hinzu, damit der Benutzer mehr als eine Option auswählen kann. Das Steuerelement wird dann als scrollbare Listenbox statt als Dropdown dargestellt. Kombinieren Sie es mit size, um festzulegen, wie viele Zeilen sichtbar sind. Um mehrere Werte auszuwählen, hält der Benutzer Ctrl (Cmd auf dem Mac) gedrückt, während er klickt, oder hält Shift gedrückt, um einen Bereich auszuwählen.
Beispiel von multiple und size
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<label for="langs">Languages you know:</label>
<select id="langs" name="langs" multiple size="4">
<option value="html">HTML</option>
<option value="css">CSS</option>
<option value="js">JavaScript</option>
<option value="php">PHP</option>
<option value="sql">SQL</option>
</select>
</body>
</html>Wenn ein multiple-Select übermittelt wird, wird jeder ausgewählte Wert unter demselben name gesendet (z. B. langs=html&langs=js).
Einen Platzhalter hinzufügen
Ein <select> hat immer einen Wert, daher gibt es keinen nativen Platzhalter. Die übliche Lösung ist eine erste Option, die leer, vorausgewählt, deaktiviert und ausgeblendet ist – sie zeigt einen Hinweistext an, kann nicht erneut ausgewählt werden und bleibt ausgeblendet, sobald die Liste geöffnet wird. Kombinieren Sie sie mit required, damit eine echte Auswahl getroffen werden muss, bevor das Formular abgesendet wird.
Beispiel einer Platzhalter-Option
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<form>
<label for="size">Choose a size:</label>
<select id="size" name="size" required>
<option value="" disabled selected hidden>Choose one</option>
<option value="s">Small</option>
<option value="m">Medium</option>
<option value="l">Large</option>
</select>
<button type="submit">Submit</button>
</form>
</body>
</html>Da der value des Platzhalters leer ist, wertet das required-Attribut dies als „nichts ausgewählt": Das Absenden ohne Auswahl einer echten Option löst die Validierungsmeldung des Browsers aus.
<select> vs. <datalist>
Ein <select> zwingt den Benutzer, aus einer festen Liste zu wählen. Wenn Sie stattdessen ein Freitextfeld möchten, das Werte vorschlägt, die der Benutzer annehmen oder ignorieren kann, ist das die Aufgabe einer <datalist>, die über das list-Attribut mit einem Text-<input> verknüpft wird – und kein Feature von <select>. Es handelt sich um ein eigenständiges Element mit anderem Verhalten; verwenden Sie es, wenn Eingabe mit Autovervollständigung besser passt als ein striktes Dropdown.
Attribute
| Attribut | Wert | Beschreibung |
|---|---|---|
| autofocus | autofocus | Legt fest, dass die Liste nach dem Laden der Seite den Fokus erhalten soll. |
| disabled | disabled | Gibt an, dass die Liste deaktiviert ist und der Benutzer nicht damit interagieren kann. |
| form | form_id | Verknüpft das <select> mit einem <form> über dessen id, sodass das Steuerelement außerhalb des <form>-Elements im Markup stehen und trotzdem mit ihm übermittelt werden kann. |
| multiple | multiple | Gibt an, dass mehr als eine Option ausgewählt werden kann. Die Methode zur Auswahl mehrerer Optionen hängt vom Betriebssystem ab. Unter Windows muss die CTRL-Taste gedrückt gehalten werden, auf dem Mac die CMD-Taste. |
| name | name | Definiert einen Namen für das Dropdown-Menü. Er kann verwendet werden, um nach dem Absenden auf die Formulardaten zuzugreifen oder um auf ein JavaScript-Element zu verweisen. |
| required | required | Gibt an, dass eine Option ausgewählt werden muss. |
| size | number | Gibt die Anzahl der sichtbaren Optionen in der Dropdown-Liste an. Wenn der Wert des „size"-Attributs größer als 1 und kleiner als die Gesamtzahl der Optionen in der Liste ist, fügt der Browser automatisch einen Scrollbalken hinzu, um anzuzeigen, dass weitere Optionen vorhanden sind. |
Der <select>-Tag unterstützt globale Attribute und die Ereignisattribute.
Einen HTML-<select>-Tag stylen
Das <select>-Element wird teilweise vom Betriebssystem gerendert, weshalb es sich vollständigem CSS-Styling widersetzt und die Ergebnisse zwischen Browsern variieren. Schrift, Farben, Abstände und das Box-Modell des Steuerelements selbst lassen sich zuverlässig setzen. Um den nativen Dropdown-Pfeil durch einen eigenen zu ersetzen, setzen Sie das System-Aussehen mit appearance: none zurück und fügen Sie einen benutzerdefinierten Pfeil hinzu (z. B. ein background-image oder ein Wrapper mit einem Pseudo-Element). Die erweiterte Optionsliste und das Styling einzelner Optionen bleiben nur lose steuerbar; für pixelgenaue, vollständig angepasste Dropdowns erstellen Entwickler üblicherweise ein Widget aus Nicht-<select>-Elementen mit JavaScript.