<datalist>: Das HTML Datenliste-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, vergeben wir ihm eine eindeutige Kennung im id-Attribut und fügen dann das list-Attribut zum <input>-Element 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 die Eingabe eingegeben werden kann. Es kann auch ein label-Attribut haben oder, falls dieses fehlt, einen Textinhalt, der vom Browser anstelle von value (Firefox) oder zusätzlich zu value (Chrome und Safari, als ergänzender Text) angezeigt werden kann. Der genaue Inhalt des Dropdown-Menüs hängt vom Browser ab, aber beim Klicken kommt der Inhalt, der ins Steuerungsfeld eingegeben wird, immer aus dem value-Attribut.

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

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

Bei der Entscheidung, das <datalist>-Element zu verwenden, sollten Sie auf folgende Barrierefreiheitsthemen achten:

• Die Schriftgröße der Optionen der Datenliste zoomt nicht, bleibt immer gleich groß. Der Inhalt der automatischen Vervollständigung wächst oder schrumpft nicht, wenn der Rest des Inhalts ein- oder ausgezoomt wird.
• Da das Ansprechen der Optionsliste mit CSS sehr eingeschränkt bis gar nicht möglich ist, kann das Rendering nicht im Hochkontrastmodus gestaltet werden.
• Einige Screenreader/Browser-Kombinationen, einschließlich NVDA und Firefox, geben den Inhalt des automatischen Vervollständigungspopups nicht bekannt.

Empfohlene Werte in 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 eines Datums und einer Zeit ermöglicht. Vordefinierte Werte können dort angezeigt werden, was dem Benutzer ermöglicht, das Steuerelement schnell auszufüllen.

<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 Folge 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"></option>
  <option value="10"></option>
  <option value="20"></option>
  <option value="30"></option>
</datalist>

Der color-Typ kann vordefinierte Farben in einer browsergesteuerten 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 speziell dessen list-Attribut;
• Das <option>-Element.