Formulare für Smartphones und Tablets optimieren

Mit dem Einsatz von HTML 5 kannst du Formularfelder für den Einsatz mit Mobilgeräten wie Smartphones oder Tablets optimieren. So lassen sich typische Symbole für diverse Formularfelder freischalten. In diesem Artikel beschreibe ich wie das funktioniert.

 

Warum man Formularfelder für Mobilgeräte optimieren sollte

Smartphones und Tablets verfügen über eine Bildschirmtastatur. Diese beinhaltet jedoch – im Vergleich zu einer normalen Computertastatur – nur relativ wenig Zeichen. Zusätzliche Zeichen, wie bspw. der Backslash ( / ) oder das At-Symbol ( @ ), müssen meist über das Antippen eines extra Symbols zunächst eingeblendet werden um sie benutzen zu können.

Der Zugriff auf das Internet erfolgt immer häufiger über Mobilgeräte. Für die Nutzer ist es daher sehr umständlich, wenn sie die Symbole immer wechseln müssen. Zum Glück hat man mit HTML 5 die Möglichkeit, bestimmte Formularfelder zu kennzeichnen. So kann man bspw. das Feld für die E-Mail Adresse als solches Kennzeichen. Die Tastatur auf dem Bildschirm blendet das @-Zeichen dann direkt mit ein. So kannst du dem Nutzer das Ausfüllen der Formulare erheblich erleichtern.

Ich habe jedes Attribut mit einer Grafik versehen, welches die Änderung verdeutlicht. Aufgenommen wurden die Bilder damals auf einem iPhone mit iOS 7. Bitte beachte, dass neuere iOS-Versionen anders aussehen könnten. Auch unterscheidet sich die Darstellung etwas auf Android-Geräten, je nach verwendeter Tastatur.

Am besten schaust du dir daher das Anzeigebeispiel an, welches ich vorbereitet habe. Hier kannst du direkt sehen, wie sich die Änderungen auf deinem Mobilgerät auswirkt.

 

Standard Textfeld

Zum Vergleich zunächst jedoch ein Beispiel eines ganz normalen Textfeldes:

 

Standard-Tastaturlayout auf dem iPhone
So schaut das Standard-Tastaturlayout auf einem iPhone mit iOS7 aus

 

E-Mail Adressen

Damit das @-Symbol gleich auf der Bildschirmtastatur zur Hand ist, kannst du für E-Mail Formularfelder das Attribut type="email" verwenden.

 

Tastatur-Layout für E-Mail-Adressen
Beim E-Mail-Layout blendet die Tastatur das @-Symbol mit ein

 

Beispiel:

<input type="email" id="mail" name="mail">

 

Internet-Adressen

Das Attribut type=“url“ kannst du verwenden, um hierdurch der Tastatur den Backslash zur Verfügung zu stellen. Domain-Endung und Punkt zeigt die Tastatur des iPhones ebenso mit an.

 

Tastatur-Layout für die Eingabe von URLs
Verwendest du das Attribut type="url", zeigt die Tastatur hierdurch Punkt, Backslash und Domain-Endung mit an

 

Beispiel:

<input type="url" id="homepage" name="homepage">

 

 

Telefonnummern und Zahlen

Du kannst das Zahlenfeld auf einem Smartphone oder Tablet einblenden, indem du die Attribute type="tel" oder type="number" verwendest. Das Attribut type="tel" erlaubt, neben den Zahlen, die Eingabe einiger Sonderzeichen (z.B. +). Mit dem Attribut type="number" können die Nutzer hingegen lediglich Zahlen eingeben.

 

Formularfeld für Telefonnummern
Das Tastatur-Layout für Telefonnummern ist unverkennbar

 

Tastaturlayout für Nummern
Das Layout für Zahlen ermöglicht deren direkte Eingabe

 

Beispiel:

<input type="tel" name="telefon" id="telefon">
<input type="number" name="telefon" id="telefon">

 

Platzhalter

Mit JavaScript kann man Platzhalter schon seit sehr langer Zeit in Formulare integrieren. In HTML 5 funktioniert das hingegen einfach mit dem Attribut placeholder="...“. Der Vorteil ist, dass du auf das zusätzliche JavaScript verzichten kannst. Somit lädt deine Website ein bisschen schneller. Außerdem funktioniert es auch dann, wenn der Anwender JavaScript in seinem Browser deaktiviert oder durch Plugins geblockt hat.

 

Platzhalter im Tastatur-Layout
So sieht der Platzhalter auf dem iPhone aus

 

Beispiel:

<input type="search" placeholder="Suchbegriff hier eingeben…">

 

Neben den Grafiken habe ich außerdem ein Anzeigebeispiel für dich vorbereitet. Dort kannst du die Effekte direkt auf deinem Mobilgerät ansehen.

Anzeigebeispiel ansehen


Dir gefällt dieser Artikel?

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht.