Web

Formulare

HTML5 - was es kann (Teil 4)

06.04.2011
Von 


Simon Hülsbömer betreut als Senior Research Manager Studienprojekte in der Marktforschung von CIO, CSO und COMPUTERWOCHE. Zuvor entwickelte er Executive-Weiterbildungen und war rund zehn Jahre lang als (leitender) Redakteur tätig. Hier zeichnete er u.a. für die Themen IT-Sicherheit und Datenschutz verantwortlich.
Die Möglichkeiten, die sich Web-Entwicklern über neue Formularfunktionen direkt aus dem Browser heraus bieten, sind fast unbegrenzt.

Im ersten Teil der HTML5-Serie konnten Sie alles über neue Präsentationsformen im multimedialen Bereich lesen. Im zweiten Teil beschäftigten wir uns mit den neuen Möglichkeiten zur Datenaufbereitung sowie zur Verknüpfung von Online-Diensten und lokalen Anwendungen. Im dritten Teil ging es weiterführend um neue Methoden der Datenübertragung. Der vierte Teil handelt neue Formularfunktionen und Bibliotheksabfragen, die künftig direkt im Browser stattfinden können, ab.

Die Veränderungen, die in der neuen HTML-Spezifikation am <form>-Element vorgenommen worden sind, gehen weiter als die vieler anderer Tags. In Zukunft bieten Formulare von Haus aus Optionen, für die vormals Add-on-Bibliotheken und zahlreiche Konfigurationseinstellungen nötig gewesen sind. Nachinstallierbare Überprüfungsmechanismen gewährleisteten früher, dass Formulardaten im richtigen Format abgelegt wurden - das kann der Browser künftig allein.

Firefox 3.6 unterstützt die HTML5-Formulare nicht…
Firefox 3.6 unterstützt die HTML5-Formulare nicht…

HTML5 bietet neue (AJAX-basierende) Input-Felder, die die richtige Datenmenge schon während der Eingabe automatisch prüfen können. Beispiele sind genaue (zeitbezogene) Angaben, die einer vorgegebenen Auswahlmenge entstammen - wie Monate, Wochen, Minuten - oder gültige URLs/E-Mail-Adressen, die einem immer gleichen Muster folgen.

… Opera 11 hingegen schon.
… Opera 11 hingegen schon.

Die HTML5-Features werden nach und nach in den Browsern umgesetzt. So können für Google Chrome bereits erlaubtes Minimum und Maximum von absoluten Werten in Eingabefeldern festgelegt werden, eine selbsttätige Prüfung findet indes nicht statt. Auch Firefox, Safari, Opera und der Internet Explorer unterstützen schon viele der neuen Formularfunktionen - jedoch nicht alle in der gleichen Art und Weise. Entwickler, die sie verwenden möchten, tun sich also weiterhin schwer, universelle Funktionen einzubringen. Testen Sie Ihren Browser hier! Wenn nur leere Felder auftauchen, unterstützt er die Funktionen nicht; gibt es hingegen Auswahlmenüs, sind sie auf der sicheren Seite (vergleiche Screenshots).

Input-Element

Bislang gab es drei Formen nativer HTML-Input-Elemente: Radio Buttons (Einfachauswahl), Checkboxen (Mehrfachauswahl) und Freitextflächen. Jede Art von Werteprüfung musste mühsam per JavaScript nachgepflegt werden. Dazu standen zwar eine Menge Bibliotheken bereit, die Umsetzung blieb jedoch jedem Entwickler selbst überlassen.

In der neuen Spezifikation macht der Browser nun einen Unterschied zwischen den verschiedenen Eingabetypen - Daten, E-Mail-Adressen, Zahlen und Web-Adressen erkennt er einzeln und bietet der Auswahl entsprechende Optionen an. Ein Datum lässt sich beispielsweise unterschiedlich auswählen: volles Datum, nur Jahr und Woche, nur Jahr und Monat oder auch nur die Uhrzeit. Kombinationen aus Uhrzeit und Datum sind ebenfalls möglich - mit und ohne Angabe einer Zeitzone.

Durch die erlaubte Vielfalt ergeben sich aber auch Probleme. Welcher Entwickler wird schon gerne den Code schreiben, der alle erlaubten Typen von Telefonnummern auf der Welt nachprüft? Mit und ohne Punkten zwischen Zahlenpaaren, mit und ohne Klammern bei Orts- und Netz-Vorwahlen, von den möglichen Sonderzeichen (+) bei Ländervorwahlen ganz zu schweigen. Einfache Standards helfen hier nicht ab, weil zuvor die Telefonnummern selbst anders aufgebaut werden müssten. Die einzig praktikable Lösung wäre, die automatische Validierung bei derartigen Eingabeelementen komplett auszusetzen. Oder eben wieder ein Freitext mit Eingabesperre für alle Nicht-Nummern, wie es heute auch schon gang und gäbe ist.

Mit Attributen werden die Formularelemente noch vielseitiger. Lassen Sie Ihren Browser für sich arbeiten - wie das geht, verraten wir auf der folgenden Seite.