Optimaler Einsatz von HTML5 Input Elementen

Lokalisierung und Datenformate für Eingabefelder

JavaScript ist ohne zweifellos ein hilfreiches Werkzeug, allerlei kleine und große Verbesserungen der User Experience in einer Seite zu implementieren. Für viele Probleme gibt es sogar fertige JavaScript Bausteine, die einfach mehr oder weniger verändert in ein Projekt eingebaut werden können. JavaScript ist also gerade für Entwickler eine große Hilfe bei der Erstellung professioneller responsiver Webapplikationen.

JavaScript wäre eigentlich das ideale Werkzeug für professionelle Homepages, wenn es da nicht einen großen Haken gäbe. Aus Sicherheitsgründen haben viele User die Anzeige von JavaScripten stark eingeschränkt oder sogar ganz unterbunden. Die Bereitstellung eines wichtigen Seitenelements als JavaScript kann im Extremfall also dazu führen, dass Benutzer stark eingeschränkt werden, im Extremfall sogar bis zur Unbenutzbarkeit einer Internetseite. Zur Vermeidung dieses Szenarios läge es nah, die komplette Seite in HTML zu programmieren, um so allen Benutzern eine uneingeschränkte User Experience zu bieten. Dass auch diese Strategie nicht ganz fehlerunanfällig ist, beleuchten wir am Beispiel international unterschiedlicher Datumsformate. Mögliche Auswege und den Umgang der wichtigsten Browser mit diesem Problem zeigen wir ebenfalls auf.

Eine schwammige Spezifikation

Der Lokalisierung von HTML5-Eingabefeldern widmet das W3-Konsortium nur zwei kurze Abschnitte, die zudem noch sehr schwammig formuliert sind. Im Kapitel 4.10.1.5 über Daten, Uhrzeiten und Zahlenformate ist nur festgelegt, dass das Darstellungsformat von Zahlen durch die Lokalisierung des Browsers festgelegt und aus dem Übertragungsformat erstellt wird. Um Kapitel 4.10.5.2 heißt es, dass Browser bestimmte Benutzerschnittstellen definieren sollen, die Daten und Zahlen entsprechend der Lokalisierung darstellen sollen. Genauere Informationen dazu, wie Browser mit verschiedenen Zahlenformaten in Eingabefeldern umzugehen haben, gibt das W3-Konsortium nicht.

Eingabefelder – es stellt sich die Formatfrage

Um das Dilemma unterschiedlicher Zahlenformate zu erläutern, sei die Schilderung eines einfachen und relativ unkritischen Beispiels erlaubt:

Ein englischsprachiger Webservice für Gesundheit, Sport und Ernährung fragt in einem Feld den BMI eines Benutzers ab. Ein Kunde gibt in dieses Feld nun beispielsweise seinen Body-Mass-Index in folgendem Format an: 20.298. Einem Benutzer aus Liverpool wird die Webseite aller Voraussicht nach eine gute Gesundheit bei völlig normalem Gewicht attestieren. Anders könnte die Sache bei einem Benutzer aus München aussehen, der in der Annahme, dass es sich um einen englischsprachigen Service handelt, seinen BMI dem anglo-amerikanischen Format entsprechend mit einem Dezimalpunkt stat einem Komma eingibt. Leider hat der kerngesunde Münchner seine Rechnung ohne die Lokalisierungseinstellungen seines Browsers gemacht, die Ihn plötzlich in einen unvorstellbar dicken und kranken Menschen mit einem fünfstelligen BMI verwandelt. Schließlich erkennt die Lokalisierung vollkommen korrekt eine Tausendertrennung.

Zugegebenermaßen war das Beispiel ein wenig extrem, aber Sie wissen jetzt immerhin, wo das Problem liegt. Stellen Sie sich nur einmal kritischere Anwendungen, als ein Fitnessprogramm vor.

Mögliche Lösungsansätze im Umgang mit unterschiedlichen Datenformaten

Um das Problem unterschiedlicher Datenformaten in HTML5-Eingabefeldern zu lösen, gibt es zwei Strategien:

• Zeigen Sie dem Nutzer das erwartete Datenformat.
• Beschränken Sie den Nutzer in seinen Eingabemöglichkeiten.

Wenn ein Browser die Lokalisierungseinstellungen sauber übernimmt, kann ein Programmierer einfach einen entsprechenden Hinweis in das Feld einbauen. Um sicher zu gehen kann die entsprechende Formatinformation auch noch einmal außerhalb des Eingabefeldes auftauchen, sodass der Benutzer sie auch während der Eingabe vor Augen hat.

Die Eingabeeinschränkung kann zum Beispiel durch das pattern-Attribut erfolgen, oder das simple Ignorieren bestimmter Zeichen, zum Beispiel einem Verbot von Zahlen über 12 bei der Monatseingabe. Eine elegante Lösung stellt auch ein Popup dar, aus dem ein Benutzer den gewünschten Wert auswählt. Natürlich sind Popups in der Regel vom verwendeten Browser abhängig und können unter Umständen ein bestehendes Designkonzept zerstören.

Eingabefelder – eine kleine Browserübersicht

Natürlich unterscheiden sich Browser nicht nur in der Darstellung von Popups. Viel elementarer ist der Umgang einzelner Browser mit den Lokalisierungseinstellungen. Im Folgenden geben wir einen sehr knappen Überblick über das Verhalten einzelner Browser.

Chrome – Der Browser aus dem Hause Google richtet sich komplett nach der Systemsprache. Alle anderen Vorgaben, wie das HTML-Language-Attribut, oder Languageheader werden ignoriert.

Firefox – Der Browser der Mozilla Foundation überprüft zuerst, ob ein HTML-Language-Attribut vorliegt. Sollte das nicht der Fall sein, wird nach einem Content-Language HTTP Header gesucht. Sollte auch dieses Element fehlen, greift Firefox auf die Einstellungen aus der Systemlokalisierung zurück.

Safari – Der Applebrowser verhält sich sowohl in der Desktopvariante wie auch in der Mobilversion ähnlich wie Googles Chrome. Außer den Systemvorgaben werden alle anderen Lokalisierungsspezifikationen ignoriert.

Edge – Obwohl der Nachfolger des Internet Explorer von sich behauptet, der erste Browser mit vollständiger HTML5-Unterstützung zu sein, wird auch hier jede Lokalisierungsspezifikation im HTML-Code ignoriert und allein auf die Systemeinstellungen zurückgegriffen.

Fazit

Die Lokalisierung von HTML5-Eingabefeldern scheint derzeit noch ein schwieriges Thema zu sein. Obwohl HTML5 die Festlegung bestimmter Spracheinstellungen ermöglicht, scheint mit Ausnahme von Firefox kein gängiger Browser diese Informationen richtig interpretieren zu können. Für Programmierer und führt das zu einigen Unsicherheiten, weil sie nie sicher sein können, wie eine Seite letztendlich beim Endnutzer angezeigt wird und wie sie sich bei der Eingabe von Daten und Zahlen verhält. Wenn die Verwendung von JavaScript zur Eingabeüberprüfung nicht infrage kommt, bleibt derzeit nur, dem Benutzer das erforderliche Format anzuzeigen, oder ihn so zu beschränken, dass Eingaben in einem falschen Format nicht möglich sind.

Sie haben weitere Fragen zum optimalen Einsatz von HTML5 Input Elementen? ! mindtwo in Bonn berät Sie gerne.