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>
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>
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>
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