HTML-Element <datalist> für Datenlisten
Eingeschränkt verfügbar
Diese Funktion ist nicht Baseline, da sie in einigen der am weitesten verbreiteten Browser nicht funktioniert.
Want more browser support for this feature? Tell us why.
Das <datalist>-Element von HTML enthält eine Gruppe von <option>-Elementen, die zulässige oder empfohlene Optionen für die Auswahl in anderen Steuerelementen darstellen.
Probieren Sie es aus
<label for="ice-cream-choice">Choose a flavor:</label>
<input list="ice-cream-flavors" id="ice-cream-choice" name="ice-cream-choice" />
<datalist id="ice-cream-flavors">
<option value="Chocolate"></option>
<option value="Coconut"></option>
<option value="Mint"></option>
<option value="Strawberry"></option>
<option value="Vanilla"></option>
</datalist>
label {
display: block;
margin-bottom: 10px;
}
Attribute
Dieses Element besitzt außer den globalen Attributen, die für alle Elemente gelten, keine weiteren Attribute.
Verwendungshinweise
Um das <datalist>-Element mit einem Steuerelement zu verknüpfen, weisen Sie ihm über das Attribut id einen eindeutigen Bezeichner zu. Fügen Sie dann dem <input>-Element das Attribut list hinzu und verwenden Sie denselben Bezeichner als Wert.
Nur bestimmte Typen von <input> unterstützen dieses Verhalten; zudem kann es je nach Browser variieren.
Jedes <option>-Element sollte ein value-Attribut besitzen, dessen Wert als Eingabevorschlag dient. Es kann außerdem ein label-Attribut oder, falls dieses fehlt, Textinhalt enthalten. Der Browser kann diesen Text anstelle von value (Firefox) oder zusätzlich zu value (Chrome und Safari, als ergänzenden Text) anzeigen. Der genaue Inhalt des Dropdown-Menüs hängt vom Browser ab. Bei der Auswahl eines Eintrags wird jedoch stets der Wert des value-Attributs in das Steuerelement übernommen.
Hinweis:
<datalist> ist kein Ersatz für <select>. Ein <datalist> stellt selbst kein Eingabefeld dar, sondern eine Liste vorgeschlagener Werte für ein zugeordnetes Steuerelement. Das Steuerelement kann weiterhin jeden Wert annehmen, der die Validierung besteht, auch wenn er nicht in der Vorschlagsliste steht.
Barrierefreiheit
Wenn Sie das <datalist>-Element verwenden möchten, sollten Sie folgende Aspekte der Barrierefreiheit berücksichtigen:
- Die Schriftgröße der Optionen in der Datenliste bleibt beim Zoomen unverändert. Der Inhalt der Vorschlagsliste wird nicht größer oder kleiner, wenn der übrige Inhalt vergrößert oder verkleinert wird.
- Da sich die Optionsliste mit CSS kaum oder gar nicht gezielt ansprechen lässt, kann ihre Darstellung nicht für den Modus mit hohem Kontrast angepasst werden.
- Einige Kombinationen aus Screenreader und Browser, darunter NVDA mit Firefox, kündigen den Inhalt des Pop-ups mit Eingabevorschlägen nicht an.
Beispiele
Textbasierte Typen
Empfohlene Werte für die Typen text, search, url, tel, email und number werden in einem Dropdown-Menü angezeigt, wenn Sie auf das Steuerelement klicken oder doppelklicken. Üblicherweise weist auch ein Pfeil auf der rechten Seite des Steuerelements auf die vordefinierten Werte hin.
<label for="myBrowser">Choose a browser from this list:</label>
<input list="browsers" id="myBrowser" name="myBrowser" />
<datalist id="browsers">
<option value="Chrome"></option>
<option value="Firefox"></option>
<option value="Opera"></option>
<option value="Safari"></option>
<option value="Microsoft Edge"></option>
</datalist>
Datums- und Uhrzeittypen
Die Typen month, week, date, time und datetime-local können eine Benutzeroberfläche zur bequemen Auswahl von Datum und Uhrzeit anzeigen. Dort können vordefinierte Werte angezeigt werden, mit denen sich das Steuerelement schnell ausfüllen lässt.
Hinweis:
Wenn diese Typen nicht unterstützt werden, wird stattdessen ein einfaches Eingabefeld vom Typ text dargestellt. Dieses Feld erkennt empfohlene Werte und zeigt sie in einem Dropdown-Menü an.
<input type="time" list="popularHours" />
<datalist id="popularHours">
<option value="12:00"></option>
<option value="13:00"></option>
<option value="14:00"></option>
</datalist>
Typ für Wertebereiche
Wenn <option>-Elemente einer Datenliste, die einem Eingabefeld vom Typ range zugeordnet ist, value-Attribute besitzen, werden deren Werte als Reihe von Markierungen angezeigt, die sich leicht auswählen lassen.
<label for="tick">Tip amount:</label>
<input type="range" list="tickmarks" min="0" max="100" id="tick" name="tick" />
<datalist id="tickmarks">
<option value="0" label="0%"></option>
<option value="10" label="Minimum Tip"></option>
<option value="20" label="Standard"></option>
<option value="30" label="Generous"></option>
<option value="50" label="Very Generous"></option>
</datalist>
Hinweis:
Das label-Attribut ist laut HTML-Standard dafür vorgesehen, die Markierungen zu beschriften. Die Browser-Unterstützung ist jedoch unterschiedlich: Beschriftungen werden möglicherweise weder sichtbar noch als Tooltips angezeigt.
Farbtyp
Der Typ color kann vordefinierte Farben in einer vom Browser bereitgestellten Benutzeroberfläche anzeigen.
<label for="colors">Pick a color (preferably a red tone):</label>
<input type="color" list="redColors" id="colors" />
<datalist id="redColors">
<option value="#800000"></option>
<option value="#8B0000"></option>
<option value="#A52A2A"></option>
<option value="#DC143C"></option>
</datalist>
Technische Zusammenfassung
| Inhaltskategorien | Flussinhalt, Formulierungsinhalt. |
|---|---|
| Zulässiger Inhalt |
Entweder
Formulierungsinhalt
oder null oder mehr <option>-Elemente.
|
| Weglassen von Tags | Keines; sowohl das Start- als auch das End-Tag sind erforderlich. |
| Zulässige Elternelemente | Jedes Element, das Formulierungsinhalt zulässt. |
| Implizite ARIA-Rolle | listbox |
| Zulässige ARIA-Rollen | Kein role zulässig |
| DOM-Schnittstelle | [`HTMLDataListElement`](/de/docs/Web/API/HTMLDataListElement) |
Spezifikationen
| Spezifikation |
|---|
| HTML # the-datalist-element |