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.

<a> Verweis

CSS - Mit import mehrere CSS-Dateien zusammenfassen

PHP - Dateien im Verzeichnis rekursiv auflisten, mit Filter

JavaScript - CSS über Javascript einbinden

MySQL - Datensätze einer Tabelle zählen

Seiten besuchen - Von Webseiten lernen
Schauen Sie sich auf anderen Webseiten um, suchen sie nach Ideen für Ihre eigene Seite. Gehen Sie mit wachsamem Auge durchs Netz. Lernen Sie aus den Fehlern anderer. Sagen Sie sich: "das hätte ich anders" oder "besser gemacht". Klicken Sie auf jeden noch so kleinen Link, schauen Sie was sich dahinter verbirgt. Wenn man zukünftigen Designern eine Empfehlung geben kann, dann diese: Surfen, surfen, surfen. Je mehr man mit eigenen Augen sieht, selbst ausprobiert und erlebt, desto besser.