HTML - Element: <datalist>

Der <datalist>-Tag (HTML 5) ermöglicht es, unter einem Textfeld (<input>-Tag) eine Auswahl mit Optionen anzuzeigen. Der Benutzer hat so die Möglichkeit (in einem Formular) einen Text einzugeben oder einen Eintrag aus der Datenliste (wird auch als Combobox, Kombinationsfeld bezeichnet) auszuwählen.

<!DOCTYPE html>
<html>
<head>
 <title>Datenliste</title>
</head>
<body>

<h1>Datenliste</h1>

<form action="">
Farbe: <input type="text" list="Farbliste">

<datalist id="Farbliste">
 <option>Rot</option>
 <option>Gelb</option>
 <option>Blau</option>
 <option>Grün</option>
</datalist>
</form>

</body>
</html>

Beispiel anzeigen

Attribute

label="Beschriftung" - Beschriftung der Optionen.

<!DOCTYPE html>
<html>
<head>
 <title>Datenliste</title>
</head>
<body>

<h1>Datenliste</h1>

<form action="">
Farbe: <input type="text" list="Auswahl">

<datalist id="Auswahl">
 <option label="Rot">#FF0000</option>
 <option label="Gelb">#FFFF00</option>
 <option label="Blau">#0000FF</option>
 <option label="Grün">#008000</option>
</datalist>
</form>

</body>
</html>

Beispiel anzeigen

Der <datalist>-Tag kann nicht mit CSS formatiert werden!