<datalist>: Das HTML Data List Element

<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 in seinem id Attribut eine eindeutige Kennung und fügen dann dem <input> Element das list Attribut mit derselben Kennung als Wert hinzu. Nur bestimmte Arten von <input> unterstützen dieses Verhalten, und es kann auch je nach 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, wenn es fehlt, einen Textinhalt, der möglicherweise vom Browser anstelle des value angezeigt wird (Firefox) oder zusätzlich zum value (Chrome und Safari als ergänzender Text). Der genaue Inhalt des Drop-Down-Menüs hängt vom Browser ab, aber beim Anklicken wird der Inhalt, der in das Steuerelement eingegeben wird, immer vom value Attribut stammen.

Note: <datalist> ist kein Ersatz für <select>. Ein <datalist> stellt keine Eingabe selbst dar; es ist eine Liste von vorgeschlagenen Werten für ein zugehöriges Steuerelement. Das Steuerelement kann immer noch jeden Wert akzeptieren, der die Validierung besteht, auch wenn er nicht in dieser Vorschlagsliste enthalten ist.

Dieses Element hat keine anderen Attribute als die globalen Attribute, die allen Elementen gemeinsam sind.

Wenn Sie entscheiden, das <datalist> Element zu verwenden, sollten Sie auf folgende Barrierefreiheitsprobleme achten:

• Die Schriftgröße der Optionen in der Dataliste zoomt nicht, sondern bleibt immer gleich groß. Die Inhalte des Autosuggests wachsen oder schrumpfen nicht, wenn der Rest der Inhalte ein- oder ausgezoomt wird.
• Da das Ansprechen der Optionsliste mit CSS sehr eingeschränkt bis gar nicht möglich ist, kann das Rendering für den Hochkontrastmodus nicht gestaltet werden.
• Einige Bildschirmleser/Browser-Kombinationen, darunter NVDA und Firefox, geben den Inhalt des Autosuggest-Popups nicht wieder.

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 doppelklickt. Typischerweise zeigt die rechte Seite eines Steuerelements auch einen Pfeil, 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>

Die Typen month, week, date, time und datetime-local können eine Schnittstelle anzeigen, die eine bequeme Auswahl von Datum und Uhrzeit ermöglicht. Vorgegebene Werte können dort angezeigt werden, sodass der Benutzer den Steuerwert schnell ausfüllen kann.

<input type="time" list="popularHours" />
<datalist id="popularHours">
  <option value="12:00"></option>
  <option value="13:00"></option>
  <option value="14:00"></option>
</datalist>

Die empfohlenen Werte im range Typ werden als Reihe von Strichmarken 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"></option>
  <option value="10"></option>
  <option value="20"></option>
  <option value="30"></option>
</datalist>

Der color Typ kann vordefinierte Farben in einer vom Browser bereitgestellten Schnittstelle 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>

• Das <input> Element, und insbesondere dessen list Attribut;
• Das <option> Element.