Formular Workshop
Lerne das Erstellen von HTML-Formularen für deinen Onlex-Formmailer
HTML5 Element ''
datalist''<datalist>
Stand:
Das
datalist Element ist eine interessante Variante um dem Benutzer Eingabevorschläge zu machen.Eine häufige Anwendung wird vielleicht die Angabe eines Landes sein.
Wichtig ist, dass diese Liste zweigeteilt ist: einerseits mit einem
input Element, andererseits mit dem datalist Element.Beispiel einer Liste anhand der Bundesländer von Deutschland:
Auszug aus dem Quelltext:
<input type="text" name="bundesland" size="20" list="bundeslandliste">
<datalist id="bundeslandliste">
<option>Bayern</option>
<option>Baden-Württemberg</option>
<option>Berlin</option>
<option>Brandenburg</option>
<option>Bremen</option>
<option>Hamburg</option>
<option>Hessen</option>
<option>Mecklenburg-Vorpommern</option>
<option>Niedersachsen</option>
<option>Nordrhein-Westfalen</option>
<option>Rheinland-Pfalz</option>
<option>Saarland</option>
<option>Sachsen</option>
<option>Sachsen-Anhalt</option>
<option>Schleswig-Holstein</option>
<option>Thüringen</option>
</datalist>
Das Eingabefeld wurde bereits in diesem Workshop vorgestellt. Hier wurde neu das
list Attribut hinzugefügt, welches wichtig für die Datenliste ist.Danach wird mit dem Element
<datalist> die Datenliste initiiert. Wichtig ist, dass in diesem Element eine ID mit dem Attribut id angegeben wird. So können das Eingabefeld und die Datenliste miteinander "kommunizieren".Die einzelnen "Datensätze" werden mit dem
option Befehl geschrieben. Dieses Element ist schon von Auswahllisten bekannt.Das Ende der Datenliste wird mit
</datalist>.Und so funktioniert die Liste für den Anwender:
In Firefox wird durch Eingabe eines einzelnen Buchstabens dieser Buchstabe in allen Zeichenketten gesucht.
Beispiel: Wenn man ein "n" eingibt, wird nicht nur "Niedersachsen" aufgelistet, sondern auch "Bremen".
In Chrome und Opera, wie auch im Internet Explorer 11 wird der eingegebene Buchstabe am Anfang einer Zeichenkette gesucht: "N" listet Niedersachsen und Nordrhein-Westfalen auf.
↑ zum Seitenanfang ↑