Tag <datalist>

Tag <datalist>

Definition

Status: Aktueller Standard

Das Tag <datalist> steht für datalist (Datenliste).

Das HTML-Element <datalist> wird verwendet, um eine Liste von vordefinierten Optionen für ein Eingabefeld (<input>) bereitzustellen. Es dient primär der Autovervollständigung, lässt dem Nutzer aber die Freiheit, auch eigene Werte einzugeben. Um eine Datenliste mit einem Eingabefeld zu verknüpfen, muss die id der <datalist> mit dem list-Attribut des <input>-Elements übereinstimmen. Im Gegensatz zu <select> erlaubt es auch freie Eingaben zu machen. Das Aussehen des Dropdowns von <datalist> lässt sich kaum mit CSS anpassen, da es vom Betriebssystem bzw. Browser gerendert wird.

Syntax

<datalist>
  <option value="...">
</datalist>

Attribute

value: Maschinenlesbarer Wert

Beispiele

= Tag

= Attribut

= Wert

Text

= Kommentar bzw. wichtig!

Beispiel datalist

Der Code:

<label for="browser-choice">Wähle einen Browser:</label>
<input list="browsers" id="browser-choice" name="browser">

<datalist id="browsers">
  <option value="Chrome">
  <option value="Firefox">
  <option value="Safari">
  <option value="Edge">
</datalist>

Ergebnis:

Ergebnis: <datalist>-Demo 1

<datalist> macht vorbereitete Vorschläge für die Eingaben, der Benutzer kann aber eigene Angaben eingeben.