Hamburger-Menu
Bild zum Thema

Tag <datalist>

html css php mysql javascript
Bild zum Thema

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 bzw. Unterelemente

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.
Beispiel <datalist> - ---

Der Code:
<label for="volume">Lautstärke wählen:</label>
<input type="range" id="volume" name="volume" min="0" max="100" list="tickmarks">

<datalist id="tickmarks">
  <option value="0" label="Stumm"></option>
  <option value="25"></option>
  <option value="50" label="Mittel"></option>
  <option value="75"></option>
  <option value="100" label="Maximum"></option>
</datalist>

Ergebnis:
Ergebnis: <datalist>-Demo 2
---

<datalist> macht beim Eingabetyp "range" bei den benannten Prozenten eine Markierung.