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

HTML-Tag <form>
» Formulare

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!

Hinzufügen von Teilstrichen

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

<style>
input[type="range"] {
 width: 250px;
 accent-color: Royalblue;
}
</style>

</head>
<body>

<h1>Datenliste</h1>

<form action="">

<label for="temp">Wählen Sie eine angenehme Temperatur:</label><br>
<input type="range" id="temp" name="temp" list="markers" min="0" max="100" value="25" step="25">

<datalist id="markers">
  <option value="0" label="0"></option>
  <option value="25" label="25"></option>
  <option value="50" label="50"></option>
  <option value="75" label="75"></option>
  <option value="100" label="100"></option>
</datalist>

</form>

</body>
</html>

Beispiel anzeigen

Bausteine  Alle Anzeigen

Eine zufällige Auswahl von Codeschnipseln aus den Bereichen HTML, CSS, PHP, JavaScript und MySQL.

<audio> Audio-Datei

CSS - Transparenter Farbverlauf

PHP - Text vertikal ausgeben

JavaScript - Zahlenwerte überprüfen und korrigieren

MySQL - Das Alter von Personen ermitteln