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!

Bausteine  Alle Anzeigen

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

<a> Verweis

CSS - Farbige Scrollleiste

PHP - Array in einer Datei speichern und wieder auslesen

JavaScript - Langsam zum Seitenanfang scrollen

MySQL - Kleinsten Wert einer Tabellenspalte ermitteln

Leuchtende Navigation
Lassen Sie ihre Navigation dadurch leuchten, dass jeder sich zurechtfindet, Einer der wichtigsten Punkte ist dem Besucher den Weg zu seinen Informationen so schnell und einfach wie nur möglich zu gestalten. Um effizient arbeiten zu können, hilft es oftmals, sich in die Lage des Besuchers zu versetzen, denn der einzige Weg eine optimale Navigation für Ihre Webseite zu planen und zu entwerfen ist genauso zu denken, wie es ein typischer Besucher tun würde.