<datalist>

Zuletzt aktualisiert am 4. Februar 2026

Das <datalist>-Element erstellt eine Vorschlagsliste für Eingabefelder, die Autocomplete-Funktionalität bietet. Im Gegensatz zu einem <select> können Nutzer aus den Vorschlägen wählen oder einen eigenen Wert eintippen. Die Verbindung zwischen Input und Datalist erfolgt über das list-Attribut des Inputs und die id des Datalists. Das ist ideal für Felder, bei denen du häufige Werte vorschlagen willst, ohne die Eingabe einzuschränken.

Grundlagen

• <datalist> definiert eine Liste von Vorschlägen für ein Eingabefeld
• Die Verbindung zum Input erfolgt über list-Attribut (Input) und id (Datalist)
• Nutzer können einen Vorschlag auswählen oder einen eigenen Wert eingeben
• Die Vorschläge werden beim Tippen gefiltert: nur passende Treffer werden angezeigt
• <datalist> funktioniert mit verschiedenen Input-Typen: text, email, url, number, range und mehr
• Die Darstellung der Vorschlagsliste variiert je nach Browser und Betriebssystem
• Das Datalist-Element selbst ist unsichtbar, es dient nur als Container für die Optionen

Syntax

<label for="browser">Browser wählen:</label>
<input type="text" id="browser" name="browser" list="browsers">

<datalist id="browsers">
  <option value="Chrome">
  <option value="Firefox">
  <option value="Safari">
  <option value="Edge">
  <option value="Opera">
</datalist>

Beispiele

Vorschlagsliste für Programmiersprachen

Der Nutzer kann tippen, um die Liste zu filtern, oder direkt einen Vorschlag auswählen:

<label for="language">Programmiersprache:</label>
<input type="text" id="language" name="language"
       list="languages" placeholder="z.B. JavaScript">

<datalist id="languages">
  <option value="JavaScript">
  <option value="TypeScript">
  <option value="Python">
  <option value="Java">
  <option value="C#">
  <option value="Go">
  <option value="Rust">
  <option value="PHP">
  <option value="Ruby">
  <option value="Swift">
</datalist>

Datalist mit verschiedenen Input-Typen

<datalist> funktioniert nicht nur mit Text-Inputs, sondern auch mit anderen Typen wie url oder email:

<!-- URL-Vorschläge -->
<label for="website">Website:</label>
<input type="url" id="website" name="website" list="urls">

<datalist id="urls">
  <option value="https://developer.mozilla.org">
  <option value="https://github.com">
  <option value="https://stackoverflow.com">
</datalist>

<!-- Email-Vorschläge -->
<label for="mail">E-Mail-Anbieter:</label>
<input type="email" id="mail" name="mail" list="emails">

<datalist id="emails">
  <option value="@gmail.com">
  <option value="@outlook.com">
  <option value="@yahoo.com">
</datalist>

Datalist mit Range-Slider

Ein weniger bekannter Anwendungsfall: Datalist kann Markierungen auf einem Range-Slider anzeigen:

<label for="volume">Lautstärke:</label>
<input type="range" id="volume" name="volume"
       min="0" max="100" step="25" list="volume-marks">

<datalist id="volume-marks">
  <option value="0" label="Aus">
  <option value="25" label="Leise">
  <option value="50" label="Mittel">
  <option value="75" label="Laut">
  <option value="100" label="Max">
</datalist>

Barrierefreiheit

Screenreader kündigen an, dass Vorschläge verfügbar sind, wenn der Nutzer das Eingabefeld fokussiert. Die Vorschlagsliste wird wie ein normales Autocomplete behandelt: Nutzer können mit den Pfeiltasten durch die Vorschläge navigieren und mit Enter einen auswählen.

Wichtig ist, dass <datalist> die Eingabe nicht einschränkt. Nutzer können immer auch eigene Werte eingeben. Das ist gut für die Barrierefreiheit, weil es keine erzwungene Auswahl gibt. Wenn du eine erzwungene Auswahl brauchst, verwende stattdessen <select>.

Stelle sicher, dass das verbundene Input-Feld ein zugeordnetes <label> hat. Die Datalist selbst braucht kein Label, da sie unsichtbar ist und nur als Datenquelle dient.

Häufige Fehler

Fehlende Verknüpfung zwischen Input und Datalist: Der häufigste Fehler ist, dass die id der Datalist nicht mit dem list-Attribut des Inputs übereinstimmt. Ohne diese Verbindung werden keine Vorschläge angezeigt. Achte auf exakte Übereinstimmung, auch bei Groß-/Kleinschreibung.

Datalist statt Select verwenden: Wenn du willst, dass Nutzer nur aus vorgegebenen Werten wählen können, ist <select> die bessere Wahl. <datalist> erlaubt immer auch freie Eingabe. Für eine strikte Auswahl fehlt <datalist> die Validierungsmöglichkeit.

Zu viele Optionen: Browser zeigen nur eine begrenzte Anzahl an Vorschlägen gleichzeitig an. Bei sehr vielen Optionen (über 100) kann die Performance leiden. Halte die Liste übersichtlich oder nutze serverseitiges Autocomplete mit JavaScript.

Doppelte IDs auf der Seite: Wenn du mehrere Datalists auf einer Seite verwendest, müssen die IDs eindeutig sein. Doppelte IDs führen dazu, dass die Verknüpfung nicht funktioniert oder das falsche Datalist verwendet wird.

Browser-Kompatibilität

Das datalist-Element wird von allen modernen Browsern unterstützt. Die visuelle Darstellung der Vorschlagsliste variiert zwischen Browsern und Betriebssystemen.

Email-Kompatibilität

Interaktive Formularelemente wie datalist werden von E-Mail-Clients nicht unterstützt. Eingabefelder und Vorschlagslisten werden entfernt.

Verwandte Elemente