Angepasste mobile Tastatur bei Formularfeldern in HTML5

HTML 5

Foto: © Ricktop – Fotolia.com

Nach mehr als acht Jahren Entwicklungszeit ist die Spezifikation von HTML5 seit Ende 2013 endlich weitestgehend abgeschlossen. Der Nachfolger von HTML 4.01 bringt eine ganze Reihe Änderungen mit sich, wenngleich diese noch nicht von allen Browsern in gleichem Maße unterstützt werden. Neben der deutlich vereinfachten Einbindung von Audio– und Video-Elementen wird auch der verstärkten mobilen Nutzung von Webseiten Rechnung getragen.

Eine besonders für mobile Geräte wie Smartphones und Tablets hilfreiche Neuerung gibt es für Formulare. Durch die Definition von Formularfeldern als ein bestimmter Typ von Feld kann unter anderem beeinflusst werden, welche Tasten auf der Display-Tastatur angezeigt werden. Dazu ist im Quelltext nur eine kleine Änderung nötig: Für input-Felder muss statt des bisherigen type=“text“ einfach der entsprechende neue Typ definiert werden, z.B. für Felder, in die Internetadressen eingegeben werden sollen:

<input id=“webseite“ type=“url“ name=“webseite“ />

Auf mobilen Geräten liegen oft – bedingt durch den nur sehr begrenzt verfügbaren Platz – Zeichen, die für das jeweilige Formularfeld benötigt werden, erst auf der „zweiten Seite“ der Tastatur. So wird bei der Eingabe einer Internetadresse im Regelfall das Zeichen / benötigt, welches in der Standard-Einstellung (type=“text“) erst durch Umschalten zu erreichen ist. Das Leerzeichen hingegen, welches in URLs nicht genutzt wird, wird direkt angezeigt.

Bei einem Formularfeld des Typs „url“ passt das Smartphone oder das Tablet die Tastaturbelegung hingegen an die entsprechenden Erfordernisse an (siehe Markierung):

input type=“text“

input type=“text“, Quelle: www.suchmaschinenland.de/kontakt.html

input type=“url“

input type=“url“, Quelle: www.suchmaschinenland.de/kontakt.html

Neben dem Feld des Typus „url“ ermöglicht eine Anzahl weiterer Feld-Typen ebenfalls die komfortablere Nutzung der Display-Tastatur, z.B. bei der Eingabe von E-Mail-Adressen oder Telefonnummern. Geräte und Browser, die die neuen Typen von Formularfeldern nicht unterstützen, zeigen weiterhin das Standardverhalten, sodass auch hier dem Nutzer keine Nachteile entstehen. Alles in allem steigt durch die simple Hinzufügung eines neuen Attributs die Benutzerfreundlichkeit beim Ausfüllen von Formularen an mobilen Endgeräten enorm.

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.