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.

<ul> Aufzählungsliste

CSS - Glühende Neon Buchstaben

PHP - Monatlich wechselnder Text

JavaScript - Beim Anklicken einer Checkbox den dazugehörenden Text hervorheben

MySQL - Wie oft ist ein Eintrag in einer Spalte vorhanden

Prägnante Linkbeschreibungen
Auch Links sind im Textfluss eine Art von Hervorhebungen. Sinnvollerweise sollten einzelne Wörter oder kurze Sätze als Link fungieren und nicht etwa ganze Textabsätze.