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