<datalist>

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.

Steckbrief <datalist>

Kategorie: Formulare
Art: Block
Beispiele: 3
Browser: 5 von 5
E-Mail: 0 von 5
Stand: 04.02.2026

Grundlagen

7 Punkte

<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

index.html

Grundsyntax

<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

3 Beispiele

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

index.html

Programmiersprachen

<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> funktioniert nicht nur mit Text-Inputs, sondern auch mit anderen Typen wie url oder email:

index.html

Verschiedene Input-Typen

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

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

index.html

Range mit Datalist

<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

4 Fehler

01 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.

02 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.

03 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.

04 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

5 von 5

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

Chrome

Komplett
Firefox

Komplett
Safari

Komplett

Seit Safari 12.1 unterstützt. Die Darstellung weicht von anderen Browsern ab.
Edge

Komplett
Opera

Komplett

Email-Kompatibilität

0 von 5

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

Apple Mail

Keine

Entfernt Formularelemente.
Gmail

Keine

Entfernt datalist und input komplett.
Outlook

Keine

Keine Unterstützung für Formularelemente.
Thunderbird

Keine

Formularelemente werden nicht gerendert.
Yahoo Mail

Keine

Entfernt Formularelemente aus dem HTML.

einmal die Woche, kostenlos

Neue 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

<datalist>

Grundlagen

Syntax

Beispiele

Barrierefreiheit

Häufige Fehler

Browser-Kompatibilität

Email-Kompatibilität

Newsletter