<datalist> HTML Datalist-Element
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 HTML enthält eine Gruppe von <option>-Elementen, die die zulässigen oder empfohlenen Optionen darstellen, aus denen bei anderen Steuerelementen ausgewählt werden kann.
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;
}
Um das <datalist>-Element an das Steuerelement zu binden, geben wir ihm im id-Attribut eine eindeutige Kennung und fügen dann dem <input>-Element das list-Attribut mit derselben Kennung als Wert hinzu. Nur bestimmte Typen von <input> unterstützen dieses Verhalten, und es kann auch von Browser zu Browser variieren.
Jedes <option>-Element sollte ein value-Attribut haben, das einen Vorschlag darstellt, der in das Eingabefeld eingegeben werden soll. Es kann auch ein label-Attribut haben oder, falls nicht vorhanden, einen Textinhalt, der möglicherweise vom Browser anstelle von value (Firefox) oder zusätzlich zu value (Chrome und Safari, als ergänzender Text) angezeigt wird. Der genaue Inhalt des Dropdown-Menüs hängt vom Browser ab, aber beim Klicken wird der eingegebene Inhalt immer aus dem value-Attribut stammen.
Hinweis:
<datalist> ist kein Ersatz für <select>. Ein <datalist> stellt keine eigene Eingabe dar; es ist eine Liste empfohlener Werte für ein zugeordnetes Steuerelement. Das Steuerelement kann weiterhin jeden Wert akzeptieren, der die Validierung besteht, auch wenn er nicht in dieser Vorschlagsliste enthalten ist.
Attribute
Dieses Element hat keine anderen Attribute als die globalen Attribute, die allen Elementen gemein sind.
Barrierefreiheit
Wenn Sie sich entscheiden, das <datalist>-Element zu verwenden, sollten Sie folgende Barrierefreiheitsprobleme berücksichtigen:
- Die Schriftgröße der Optionen der Dataliste zoomt nicht mit, sie bleibt immer gleich groß. Die Inhalte der automatischen Vorschläge wachsen oder schrumpfen nicht, wenn der Rest der Inhalte herein- oder herausgezoomt wird.
- Da das Ansprechen der Optionsliste mit CSS sehr begrenzt bis nicht existent ist, kann die Darstellung nicht für Hochkontrastmodus gestaltet werden.
- Einige Bildschirmleser-/Browser-Kombinationen, einschließlich NVDA und Firefox, kündigen den Inhalt des automatischen Vorschlag-Popups nicht an.
Beispiele
Textuelle Typen
Empfohlene Werte in den Typen text, search, url, tel, email und number werden in einem Dropdown-Menü angezeigt, wenn der Benutzer auf das Steuerelement klickt oder doppelt klickt. Normalerweise wird auf der rechten Seite eines Steuerelements ein Pfeil angezeigt, der auf das Vorhandensein vordefinierter Werte hinweist.
<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>
Datum- und Uhrzeittypen
Die Typen month, week, date, time und datetime-local können eine Benutzeroberfläche anzeigen, die eine bequeme Auswahl eines Datums und einer Uhrzeit ermöglicht. Vordefinierte Werte können dort angezeigt werden, sodass der Benutzer schnell den Steuerungswert ausfüllen kann.
Hinweis:
Wenn diese Typen nicht unterstützt werden, wird stattdessen ein grundlegender text-Typ gerendert, der ein Textfeld erstellt. Dieses Feld erkennt die empfohlenen Werte korrekt und zeigt sie dem Benutzer 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>
Bereichstyp
Wenn value-Attribute in <option>-Elementen enthalten sind, die für eine Datalist bereitgestellt werden, die mit einem range-Eingabetyp verknüpft ist, werden sie als Serie von Markierungen angezeigt, die der Benutzer leicht auswählen kann.
<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 soll laut HTML-Standard Bezeichnungen für Markierungen bereitstellen. Die aktuelle Unterstützung durch Browser variiert jedoch; die Bezeichnungen werden möglicherweise nicht visuell oder als Tooltips angezeigt.
Farbtyp
Der color-Typ kann vordefinierte Farben in einer vom Browser bereitgestellten Oberflä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 Übersicht
| Inhaltskategorien | Flussinhalt, Phraseninhalt. |
|---|---|
| Zulässiger Inhalt |
Entweder
Phraseninhalt
oder null oder mehr <option>-Elemente.
|
| Tag-Auslassung | Keine, sowohl das Start- als auch das Endtag sind obligatorisch. |
| Zulässige Eltern | Jedes Element, das Phraseninhalt akzeptiert. |
| Implizite ARIA-Rolle | Listbox |
| Zulässige ARIA-Rollen | Keine role zulässig |
| DOM-Schnittstelle | [`HTMLDataListElement`](/de/docs/Web/API/HTMLDataListElement) |
Spezifikationen
| Spezifikation |
|---|
| HTML # the-datalist-element |