Am 14. September 2017 haben wir eine überarbeitete Fassung unserer Datenschutzrichtlinie veröffentlicht. Wenn Sie video2brain.com weiterhin nutzen, erklären Sie sich mit diesem überarbeiteten Dokument einverstanden. Bitte lesen Sie es deshalb sorgfältig durch.

HTML-Tipps für Webentwickler: Jede Woche neu

datalist

LinkedIn Learning kostenlos und unverbindlich testen!

Jetzt testen Alle Abonnements anzeigen
Unabhängig davon, ob es sich bei Ihrem Projekt um eine "große" Website handelt oder eine "kleine", Sie einen Webshop aufsetzen wollen oder einen privaten Blog betreuen – eines haben alle Webseiten gemeinsam: die Basis ist HTML. Profitieren Sie in dieser praktischen Tipps&Tricks-Sammlung von der jahrelangen Erfahrung der Trainerin Florence Maurice, die Ihnen unbekannte Features nahe bringt, zur Übersicht über die einzelnen Versionen verhilft oder oftmals nur mit kleinen, pfiffigen Hinweisen Ihren Alltag als Webdesigner und -programmierer erleichtert.
04:48
  Lesezeichen setzen

Transkript

Mit einer Auswahlliste schränken Sie einen Benutzer ein. Was ist, wenn Sie die Option, die er benötigt, nicht berücksichtigt haben? Das ist ein klassischer Fall für Datalist. Beginnen wir mit einem Input-Element, das wir in eine Datalist verwandeln wollen. Dafür brauchen wir das Datalist-Element selber, das muss geöffnet und geschlossen werden, und innerhalb dieses Datalist-Elements gebe ich dann die einzelnen Options an, die kopiere ich mir einmal von da unten. Diese Options folgen demselben Prinzip, was ich auch bei Auswahllisten nehme. Was jetzt noch fehlt, ist ein Bezug von meinem Input-Feld zu dieser Datalist, und diesen Bezug stelle ich her, indem ich das List-Attribut verwende und dann beispielsweise angebe "browserliste", dann kann ich auch bei Datalist Browserliste angeben als ID und dadurch ist der Bezug zwischen Beiden hergestellt. Sehen wir uns das Beispiel dann einmal in den einzelnen Browsern an und wie die dieses umsetzen. Beginnen wir mit Chrome, da erscheint so ein kleiner Pfeil, wenn ich über dieses Element habere, und dann habe ich meine Auswahlliste, wo ich etwas wählen kann, ich kann aber natürlich auch etwas selbst angeben. Im Internet Explorer sieht das so aus, wenn ich da reinklicke, erhalte ich meine Liste, kann etwas auswählen, kann das natürlich auch löschen und was eigenes eingeben, "Neuer Browser". Im Prinzip genauso sieht es im Edge aus, da ist meine Liste und ich kann auch etwas selber schreiben. Im Firefox erscheint die Liste ebenfalls oder eben auch, wenn ich anfange zu schreiben, dann werden mir nur noch die Optionen angezeigt, die beispielsweise ein "e" enthalten. Es gibt jetzt ein paar Variationen für die Verwendung der Datalist. Ich kommentiere das erste Element einmal aus, und zwar können Sie auch eine Select- Auswahlliste direkt in dieses Datalist hereinschreiben. Dann ist es sinnvoll, dass Sie noch eine Beschreibung geben, wie zum Beispiel "oder aus dieser Liste wählen" und das können Sie dann innerhalb eines Label-Elements machen. Die erste Option sollte leer bleiben, damit in Browsern, die Datalist nicht interpretieren, nicht schon eine Auswahl angezeigt wird. Also wenn ich das nicht eingeben würde, würde in Browsern, die das nicht unterstützen, natürlich ganz normal in diesem Select-Element zuerst "Chrome" erscheinen. Damit das nicht passiert, habe ich dieses leere Option-Element. Hier sieht man das Beispiel im Firefox und eben meine Liste, das erste Element ist leer. Ungünstiger wäre hingegen Folgendes, sehen wir uns das einmal an: Was man ja auch häufig macht ist, dass man bei dem ersten Option-Element den Text schreibt "oder aus der Liste wählen", das macht man gerne bei Select-Elementen und das wäre in diesem Fall ungünstig, weil im Firefox dann dieser Text auch wirklich erscheint. Ich habe es gerade im Firefox aufgerufen und da sieht man auch den Text als Auswahl "oder aus der Liste wählen", was natürlich ungünstig ist. Übrigens verhält sich in diesem Punkt Chrome anders. Wenn man das anschaut in Chrome das Beispiel, dann ist dieser Text, der taucht an dieser Stelle nicht auf. Sehen wir uns die einzelnen Optionen noch einmal an. Prinzipiell erstellen Sie eine Vorschlagsliste durch das Element Datalist, das braucht eine ID und dieselbe ID geben Sie an beim Input-Element nach dem Attribut "List". Sie können dann auch innerhalb von Datalist selber mit einem Select-Element arbeiten, dann sollten Sie für einen Text, wie "oder aus der Liste wählen" am besten das Label-Element nutzen, ungünstiger is es hingegen, wenn Sie diesen Text innerhalb eines Option-Elements schreiben.