ANZEIGE

HTML5 powered by Microsoft – diese Kategorie wird präsentiert vom Internet Explorer 9

Welche Bedeutung Standards haben und was Microsoft damit zu tun hat, verraten wir Ihnen hier!

Teilen 8 Twittern 54
von , 05.01.2012

HTML5: Eingabefeld mit Vorschlägen als Dropdownliste

Eingabefelder von Formularen werden gerne mit einer Dropdownliste ausgestattet, in der Vorschläge für Benutzereingaben gemacht werden. Gerade Suchmaschinen und soziale Netzwerke schlagen auf diese Weise gesuchte Begriffe oder Personen vor. Mit HTML5 lässt sich eine solche Dropdownliste einfach und ohne JavaScript realisieren.

HTML5 und das DATALIST-Element

Mit dem neuen DATALIST-Element lassen sich Begriffe festlegen, die bei entsprechender Eingabe als Vorschläge gezeigt werden sollen. Die einzelnen Begriffe, die vorgeschlagen werden sollen, werden über das OPTION-Element definiert:

<input type="text" name="laender" list="laender">
  <datalist id="laender">
    <option value="Baden-Württemberg" />
    <option value="Bayern" />
    <option value="Berlin" />
    …
  </datalist>
</input>

Das DATALIST-Element muss nicht zwingen Kindelement eines INPUT-Elementes sein. Es kann auch außerhalb stehen. Über die Eigenschaft „list“ wird dem INPUT-Element die ID der Liste mitgeteilt. Es ist also auch möglich, eine Dropdownliste für mehrere Eingabefelder zu nutzen.

html5 datalist
HTML5: Dropdownlist nur mit DATALIST-Vorschlägen (links) und zusätzlich mit im Browser gespeicherten Eingaben (rechts)

Wird zweimal das jeweilige Eingabefeld angeklickt, erscheint die komplette Vorschlagsliste als Dropdown. Wird ein „B“ eingegeben, erscheinen nur noch die Vorschläge, die mit „B“ beginnen.

Hat der Browser für das Eingabefeld seinerseits Benutzereingaben gespeichert, werden diese ebenfalls in der Dropdownliste dargestellt. In diesem Fall ist die Liste zweigeteilt. Zuerst werden die im Browser gespeicherten Eingaben gelistet, anschließend die im Formular definierten Vorschläge. Beides wird durch eine Linie voneinander getrennt.

Unterstützung durch Browser

Derzeit unterstützen nur Firefox und Opera das DATALIST-Element. Allerdings lässt sich mit jQuery und Modernizr die Dropdownliste auch in anderen Browsern funktionsfähig machen. Bei Modernizr handelt es sich um eine JavaScript-Bibliothek, die Fallbacks für HTML5-Funktionen bereitstellt. So können auch ältere Browser HTML5-Funktionen nutzen – wenn auch über den Umweg einer JavaScript-Bibliothek.

Was haltet ihr von dem DATALIST-Element? Setzt ihr es ein und wenn ja, wofür nutzt ihr es?

Weitereführende Links zum Thema HTML5:

Weitere Artikel zu Google, HTML und HTML5



Empfohlene Produkte

Kommentare: 59 Tweets: 54 Facebook-Likes: 8
05.01.2012

Das interessiert dich bestimmt auch

59 Antworten

  1. von Dirk Jesse 05.01.2012 (15:16Uhr) 1.

    Auch zu diesem Beitrag ein höflicher Korrekturhinweis. Mit Modernizr lässt sich zwar per Feature-Detection ermitteln, ob ein Browser das datalist-Element unterstützt oder nicht. Die Funktionalität wird jedoch erst mit einem passenden Polyfill nachgerüstet, wofür Modernizr zwar eine Ladefunktion anbietet, aber der Polyfill selbst (z.B. die Webshims-Lib von Alexander Farkas, die auch einen datalist-Polyfill beinhaltet), hat mit Modernizr nichts zu tun. Modernizer wird in diesem Fall streng genommen gar nicht benötigt. Einfach nur Modernizr auf das Problem werfen, reicht jedoch nicht.

  2. von Guido 05.01.2012 (15:21Uhr) 2.

    Das klingt ja soweit ganz nett und ist für kleine Listen, z.B. Bundesländer, sicher geeignet. Aber bei einer großen Liste sorgten man eben auch für aufgeblähten Quellcode. Da würde ich dann doch eher auf eine AJAX Abfrage setzen. Von Fall zu Fall muss man sich das wohl gründlich überlegen.

    Ansonsten eine chique Alternative zu den Selectboxen.

  3. von abogomolov 05.01.2012 (16:15Uhr) 3.

    @Guido: Dein letzter Satz ist leider auch nicht ganz richtig. Der User kann ja immer noch irgendwas anderes da rein schreiben. Es bietet lediglich Vorschläge, zwingt diese aber nicht auf.

  4. von Dirk Jesse 05.01.2012 (16:36Uhr) 4.

    @Guido
    Innerhalb einer Webapplikation sind datalist-Elemente nicht nur "ganz nett", sondern eine wirklich super-einfach zu implementierende Methode für eine Autocomplete-Funktionalität, wobei die Trefferlisten sinnvollerweise dynamisch erzeugt werden sollten.

  5. von alexander farkas 05.01.2012 (17:10Uhr) 5.

    @Guido
    Dir ist aber auch klar, dass du nicht nur datalist elemente, sondern auch die darin befindlichen option, dynamisch erstellen / ändern kannst?

  6. von Daniel 05.01.2012 (17:47Uhr) 6.

    Hmm auf der anderen Seite aber auch nicht so schön, dass bei Eingabe eines einzelnen Buchstaben alle Wörter angezeigt werden die auch den selben beinhalten, egal ob Anfangsbuchstabe oder nicht. Aber an sich super, dass es gleich »von Haus aus« so ein implementiertes Feature gibt.

  7. von Andreas Brose via facebook 05.01.2012 (18:06Uhr) 7.

    Nice

  8. von Denis Potschien 07.01.2012 (14:07Uhr) 8.

    @Dirk: Natürlich kann Modernizr allein nicht dafür sorgen, dass DATALIST auch in anderen Browsern läuft. Mit einem entsprechenden jQuery-Plugin funktioniert es.

  9. von [KW01/12] Themen der Woche » IT::f… 09.01.2012 (08:29Uhr) 9.

    [...] t3n hat mal wieder gute Tipps zu HTML5. Diesmal: Eingabefelder mittels Vorschlägen per Dropdown-Feld einfacher gestalten. [...]

  10. von Linkhub – Woche 01-2012 09.01.2012 (11:40Uhr) 10.

    [...] HTML5: Eingabefeld mit Vorschlägen als Dropdownliste » t3n News [...]

  11. von Wie viel HTML5/CSS3 kann dein Browser? J… 09.01.2012 (15:37Uhr) 11.

    [...] HTML5: Eingabefeld mit Vorschlägen als Dropdownliste - t3n News [...]

  12. von Tooltipp: Videos in HTML5 konvertieren … 09.01.2012 (16:59Uhr) 12.

    [...] HTML5: Eingabefeld mit Vorschlägen als Dropdownliste - t3n News [...]

  13. von Barrierefreiheit auch für dynamische Se… 10.01.2012 (11:05Uhr) 13.

    [...] HTML5: Eingabefeld mit Vorschlägen als Dropdownliste - t3n News [...]

  14. von Mobile HTML5-Entwicklung für iOS mit me… 10.01.2012 (11:19Uhr) 14.

    [...] HTML5: Eingabefeld mit Vorschlägen als Dropdownliste - t3n News [...]

  15. von Popcorn – HTML5-Tool zum Erstellen… 10.01.2012 (11:21Uhr) 15.

    [...] HTML5: Eingabefeld mit Vorschlägen als Dropdownliste - t3n News [...]

  16. von Windows 8 und Internet Explorer 10: Viel… 10.01.2012 (11:28Uhr) 16.

    [...] HTML5: Eingabefeld mit Vorschlägen als Dropdownliste - t3n News [...]

  17. von HTML5-Spiele entwickeln mit Play My Code… 10.01.2012 (11:34Uhr) 17.

    [...] HTML5: Eingabefeld mit Vorschlägen als Dropdownliste - t3n News [...]

  18. von Mercury: WYSIWYG-Editor auf Basis von HT… 10.01.2012 (11:36Uhr) 18.

    [...] HTML5: Eingabefeld mit Vorschlägen als Dropdownliste - t3n News [...]

  19. von Mobile Boilerplate V2 ist da: HTML5 Schn… 10.01.2012 (11:43Uhr) 19.

    [...] HTML5: Eingabefeld mit Vorschlägen als Dropdownliste - t3n News [...]

  20. von HTML5: Was können mobile Browser heute?… 10.01.2012 (11:45Uhr) 20.

    [...] HTML5: Eingabefeld mit Vorschlägen als Dropdownliste - t3n News [...]

  21. von Slideshare kickt Flash und setzt auf HTM… 10.01.2012 (11:49Uhr) 21.

    [...] HTML5: Eingabefeld mit Vorschlägen als Dropdownliste - t3n News [...]

  22. von Firefox 6 und HTML5: WebSockets, Server-… 10.01.2012 (11:52Uhr) 22.

    [...] HTML5: Eingabefeld mit Vorschlägen als Dropdownliste - t3n News [...]

  23. von Bootstrap: CSS- und HTML5-basiertes WebA… 10.01.2012 (11:57Uhr) 23.

    [...] HTML5: Eingabefeld mit Vorschlägen als Dropdownliste - t3n News [...]

  24. von HTML5 Musikprojekt: “All Is Not Lost… 10.01.2012 (12:33Uhr) 24.

    [...] HTML5: Eingabefeld mit Vorschlägen als Dropdownliste - t3n News [...]

  25. von PressWork – WordPress-Themelayout… 10.01.2012 (12:38Uhr) 25.

    [...] HTML5: Eingabefeld mit Vorschlägen als Dropdownliste - t3n News [...]

  26. von HTML5 History API – Dynamische Web… 10.01.2012 (12:43Uhr) 26.

    [...] HTML5: Eingabefeld mit Vorschlägen als Dropdownliste - t3n News [...]

  27. von Baseline: Typografie-orientiertes HTML5-… 10.01.2012 (12:43Uhr) 27.

    [...] HTML5: Eingabefeld mit Vorschlägen als Dropdownliste - t3n News [...]

  28. von AXR hält HTML5/CSS3 für untauglich, wi… 10.01.2012 (12:46Uhr) 28.

    [...] HTML5: Eingabefeld mit Vorschlägen als Dropdownliste - t3n News [...]

  29. von Perkins Framework: Rapid Development mit… 10.01.2012 (12:49Uhr) 29.

    [...] HTML5: Eingabefeld mit Vorschlägen als Dropdownliste - t3n News [...]

  30. von HTML5 Frameworks zur Entwicklung von Bro… 10.01.2012 (12:53Uhr) 30.

    [...] Seite:  1 2 nächste Seite ► Ads_BA_AD("FOOT"); Das könnte dich auch interessieren: HTML5Eingabefeld mit Vorschlägen als DropdownlisteEingabefelder von Formularen werden gerne mit ei...HTML5Überschriften und Einleitungen von Artikeln gruppierenDie Formatierung von Überschriften mit [...]

  31. von Mobiles HTML5 Framework aus Deutschland… 10.01.2012 (12:54Uhr) 31.

    [...] HTML5: Eingabefeld mit Vorschlägen als Dropdownliste - t3n News [...]

  32. von Kolumne: HTML5 – Hype vs. Sinn »… 10.01.2012 (12:55Uhr) 32.

    [...] HTML5: Eingabefeld mit Vorschlägen als Dropdownliste - t3n News [...]

  33. von HTML5 hat jetzt ein schickes Logo » t3n… 10.01.2012 (12:56Uhr) 33.

    [...] HTML5: Eingabefeld mit Vorschlägen als Dropdownliste - t3n News [...]

  34. von HTML5 und CSS3 heute schon nutzen » t3n… 10.01.2012 (12:58Uhr) 34.

    [...] HTML5: Eingabefeld mit Vorschlägen als Dropdownliste - t3n News [...]

  35. von HTML5, JavaScript, NoSQL: Technologien,… 10.01.2012 (13:00Uhr) 35.

    [...] HTML5: Eingabefeld mit Vorschlägen als Dropdownliste - t3n News [...]

  36. von Webdev: HTML5 – Fakten und Mythen… 10.01.2012 (13:01Uhr) 36.

    [...] HTML5: Eingabefeld mit Vorschlägen als Dropdownliste - t3n News [...]

  37. von HTML5: Sublime startet HTML5-Video als S… 10.01.2012 (13:02Uhr) 37.

    [...] HTML5: Eingabefeld mit Vorschlägen als Dropdownliste - t3n News [...]

  38. von Webentwicklung: HTML5-Videoplayer mit Fl… 10.01.2012 (13:03Uhr) 38.

    [...] HTML5: Eingabefeld mit Vorschlägen als Dropdownliste - t3n News [...]

  39. von Webentwicklung: HTML5 Boilerplate –… 10.01.2012 (13:06Uhr) 39.

    [...] HTML5: Eingabefeld mit Vorschlägen als Dropdownliste - t3n News [...]

  40. von „The Wilderness Downtown”: Beeindruc… 10.01.2012 (13:10Uhr) 40.

    [...] HTML5: Eingabefeld mit Vorschlägen als Dropdownliste - t3n News [...]

  41. von CloudCanvas: Bildbearbeitung mittels HTM… 10.01.2012 (13:12Uhr) 41.

    [...] HTML5: Eingabefeld mit Vorschlägen als Dropdownliste - t3n News [...]

  42. von Webdev: Tschüß, TinyMCE, hier kommt Al… 10.01.2012 (13:12Uhr) 42.

    [...] HTML5: Eingabefeld mit Vorschlägen als Dropdownliste - t3n News [...]

  43. von Web-Entwicklung: Ext JS heißt jetzt Sen… 10.01.2012 (13:16Uhr) 43.

    [...] HTML5: Eingabefeld mit Vorschlägen als Dropdownliste - t3n News [...]

  44. von HTML5-Showcase: Apple zeigt, was mit HTM… 10.01.2012 (13:17Uhr) 44.

    [...] HTML5: Eingabefeld mit Vorschlägen als Dropdownliste - t3n News [...]

  45. von HTML5 Showcase: Google zeigt mit Chrome… 10.01.2012 (13:25Uhr) 45.

    [...] HTML5: Eingabefeld mit Vorschlägen als Dropdownliste - t3n News [...]

  46. von Webentwicklung: „ProtoFluid“ –… 10.01.2012 (13:26Uhr) 46.

    [...] HTML5: Eingabefeld mit Vorschlägen als Dropdownliste - t3n News [...]

  47. von Web-Standards: HTML5 rockt! Und Google z… 10.01.2012 (14:22Uhr) 47.

    [...] HTML5: Eingabefeld mit Vorschlägen als Dropdownliste - t3n News [...]

  48. von HTML5: Neue IE9-Preview kann (endlich) m… 10.01.2012 (14:52Uhr) 48.

    [...] HTML5: Eingabefeld mit Vorschlägen als Dropdownliste - t3n News [...]

  49. von Google Chrome 5: Chrome auf Speed (und m… 10.01.2012 (14:54Uhr) 49.

    [...] HTML5: Eingabefeld mit Vorschlägen als Dropdownliste - t3n News [...]

  50. von Webentwicklung: 5 Tools, um HTML5-Video… 10.01.2012 (14:55Uhr) 50.

    [...] HTML5: Eingabefeld mit Vorschlägen als Dropdownliste - t3n News [...]

  51. von Adobe CS5: Flash in HTML5-Canvas-Code um… 10.01.2012 (14:57Uhr) 51.

    [...] HTML5: Eingabefeld mit Vorschlägen als Dropdownliste - t3n News [...]

  52. von Webentwicklung: „html5media“ bringt… 10.01.2012 (15:03Uhr) 52.

    [...] HTML5: Eingabefeld mit Vorschlägen als Dropdownliste - t3n News [...]

  53. von HTML5: Evolution statt Revolution » t3n… 10.01.2012 (15:05Uhr) 53.

    [...] HTML5: Eingabefeld mit Vorschlägen als Dropdownliste - t3n News [...]

  54. von Webentwicklung: 15 Alternativen für Tag… 10.01.2012 (15:07Uhr) 54.

    [...] HTML5: Eingabefeld mit Vorschlägen als Dropdownliste - t3n News [...]

  55. von Web-Entwicklung: JavaScript „Modernizr… 10.01.2012 (16:19Uhr) 55.

    [...] HTML5: Eingabefeld mit Vorschlägen als Dropdownliste - t3n News [...]

  56. von HTML5 rollt an: Neuigkeiten und erste Tu… 10.01.2012 (16:21Uhr) 56.

    [...] HTML5: Eingabefeld mit Vorschlägen als Dropdownliste - t3n News [...]

  57. von HTML5: Sandbox-Modus für IFrames » t3n… 12.01.2012 (10:28Uhr) 57.

    [...] HTML5: Eingabefeld mit Vorschlägen als Dropdownliste [...]

  58. von HTML5: Sandbox-Modus für IFrames » t3n… 12.01.2012 (10:28Uhr) 58.

    [...] HTML5: Eingabefeld mit Vorschlägen als Dropdownliste [...]

  59. von Bilder und Bildunterschriften in HTML5 a… 06.02.2012 (10:00Uhr) 59.

    [...] HTML5: Eingabefeld mit Vorschlägen als Dropdownliste [...]

Deine Meinung


(wird nicht veröffentlicht)