HTML <datalist>-Tag
Der HTML <datalist>-Tag erstellt eine Liste vordefinierter Optionen für ein <input>-Feld. Lernen Sie die Verwendung mit Beispielen kennen.
Das <datalist>-Tag ist eines der HTML5-Elemente. Es stellt eine Liste vordefinierter Vorschläge für ein <input>-Feld bereit und bietet ein Autocomplete-Dropdown, während der Benutzer dennoch einen beliebigen Wert eingeben kann. Während der Benutzer tippt, filtert der Browser die Vorschläge und zeigt die passenden an.
Das unterscheidet <datalist> von einem <select>-Menü: Ein <select> schränkt den Benutzer auf eine feste Auswahl ein, während ein <datalist> nur Werte vorschlägt — das Feld bleibt ein Freitextfeld.
Vordefinierte Optionen werden in verschachtelten <option>-Elementen angegeben.
Wie die drei Teile zusammenwirken
Eine funktionierende Datalist besteht immer aus drei Teilen, die über eine ID miteinander verbunden werden:
- Ein
<input>-Element mit einemlist-Attribut. - Ein
<datalist>-Element, desseniddemlist-Wert entspricht. - Ein oder mehrere
<option>-Elemente innerhalb der<datalist>, die die Vorschläge enthalten.
<input list="ice-cream-flavors" />
<datalist id="ice-cream-flavors">
<option value="Chocolate"></option>
<option value="Vanilla"></option>
<option value="Strawberry"></option>
</datalist>Die Verknüpfung erfolgt rein über den Namen: Der list-Wert am Input ("ice-cream-flavors") muss identisch mit der id der <datalist> sein. Stimmen sie nicht genau überein, werden keine Vorschläge angezeigt. Die <datalist> selbst wird nicht auf der Seite dargestellt — nur ihre Optionen erscheinen im Dropdown des Inputs.
Die <option>-Kindelemente
Jeder Vorschlag ist ein einzelnes <option>-Element. Es gibt zwei Möglichkeiten, seinen Text anzugeben:
value-Attribut — der Text, der in das Eingabefeld eingefügt wird, wenn die Option ausgewählt wird.- Sichtbare Beschriftung — Text zwischen dem öffnenden und schließenden Tag, der dem Benutzer angezeigt wird.
Wenn Sie nur value setzen, wird derselbe String sowohl angezeigt als auch eingefügt:
<option value="Firefox"></option>Sie können auch einen maschinellen Wert mit einer benutzerfreundlicheren Beschreibung über das label-Attribut (oder Labeltext) kombinieren, den manche Browser neben dem Wert anzeigen:
<option value="FF" label="Firefox"></option>Hier erhält das Eingabefeld FF, während das Dropdown das besser lesbare Firefox anzeigen kann. Das Browser-Rendering von getrennten Wert/Label-Paaren variiert, daher ist es für die meisten Fälle am einfachsten und zuverlässigsten, value menschenlesbar zu halten.
<datalist> vs. <select>
Beide zeigen eine Liste von Optionen an, lösen aber unterschiedliche Probleme:
<datalist> | <select> | |
|---|---|---|
| Benutzereingabe | Freitext — kann beliebiges eingeben | Auf gelistete Optionen beschränkt |
| Rolle der Liste | Vorschläge / Autocomplete | Die einzigen erlaubten Werte |
| Tippen zum Filtern | Ja, filtert beim Tippen | Eingeschränkt |
| Übermittelter Wert | Was auch immer im Feld steht | Immer eine der Optionen |
| Verwenden, wenn | Sie Hinweise wollen, aber benutzerdefinierte Werte erlauben (Suchfeld, E-Mail-Domain, Stadt) | Die Antwort eine aus einer festen Menge sein muss (Ländercode, Tarifebene) |
Verwenden Sie <datalist>, wenn Vorschläge hilfreich sind, aber ein benutzerdefinierter Wert trotzdem zulässig ist; verwenden Sie <select>, wenn nur die angebotenen Werte akzeptabel sind.
Syntax
Der <datalist>-Tag kommt paarweise vor. Der Inhalt wird zwischen dem öffnenden (<datalist>) und schließenden (</datalist>) Tag geschrieben.
Beispiel des HTML <datalist>-Tags:
HTML <datalist>-Tag
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<label for="browser">Choose browser</label>
<input list="browsers" id="browser" />
<!-- The list attribute value matches the datalist id -->
<datalist id="browsers">
<option value="Opera"></option>
<option value="Safari"></option>
<option value="Firefox"></option>
<option value="Google Chrome"></option>
<option value="Maxthon"></option>
</datalist>
</body>
</html>Die Verwendung eines echten <label>-Elements (anstelle eines einfachen <div>) und das Verweisen seines for-Attributs auf die id des Inputs verbindet die Beschriftung mit dem Feld, sodass Screenreader sie ankündigen und ein Klick auf das Label den Input fokussiert.
Beispiel: eine Länderauswahl
Eine Datalist eignet sich gut für Eingaben mit vielen bekannten Werten, bei denen Sie dennoch Freitext erlauben möchten — z. B. die Auswahl eines Landes in einem Formular:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<form>
<label for="country">Your country</label>
<input list="countries" id="country" name="country" />
<datalist id="countries">
<option value="Argentina"></option>
<option value="Brazil"></option>
<option value="Canada"></option>
<option value="France"></option>
<option value="Germany"></option>
<option value="Japan"></option>
<option value="United States"></option>
</datalist>
<button type="submit">Submit</button>
</form>
</body>
</html>Browser-Unterstützung
<datalist> wird von allen modernen Desktop-Browsern unterstützt. Beachten Sie Einschränkungen bei mobilen Geräten: Die Unterstützung im iOS Safari war historisch gesehen unvollständig oder inkonsistent zwischen Versionen, und einige ältere oder weniger verbreitete Browser ignorieren das Element vollständig. Da das Feld ein normales Texteingabefeld ist, zeigen Browser, die die Vorschläge nicht rendern, einfach ein einfaches Eingabefeld an — verwenden Sie <datalist> daher als progressive Verbesserung und nicht als einzige Möglichkeit, gültige Werte zu vermitteln.
Attribute
Der <datalist>-Tag hat keine elementspezifischen Attribute. Die gesamte Verknüpfung erfolgt über die id (die vom list-Attribut des Inputs referenziert wird), und die Vorschläge befinden sich in den untergeordneten <option>-Elementen. Er unterstützt die Globalen Attribute und die Event-Attribute.