Formulare für Smartphones und Tablets optimieren

Zuletzt aktualisiert: Samstag, 14. Januar 2017 Geschrieben von Jan Pionzewski

Mit dem Einsatz von HTML 5 ist es möglich, Formularfelder für den Einsatz mit Mobilgeräten wie Smartphones oder Tablets zu 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 Bildschirmtastatur beinhaltet jedoch - im Vergleich zu einer normalen Computertastatur - nur relativ wenig Zeichen. Zusätzliche Zeichen, wie z.B. 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.

Da heutzutage häufiger als jemals zuvor von mobilen Endgeräten aus auf das Internet zugegriffen wird, ist das für den Anwender immer sehr umständlich. Zum Glück hat man mit HTML 5 die Möglichkeit, bestimmte Formularfelder zu kennzeichnen. So kann man beispielsweise das Feld für die E-Mail Adresse als solches Kennzeichen und die Bildschirmtastatur auf Smartphone und Tablet blendet das @-Zeichen direkt mit ein. So kann dem Anwender das Ausfüllen der Formulare wesentlich erleichtert werden.

Zur Verdeutlichung habe ich jedes Attribut mit einer entsprechenden Grafik (von einem iPhone mit iOS7 aus aufgenommen) versehen, welches die Änderungen verdeutlicht. 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 wird z.B. das @-Symbol mit eingeblendet

 

Code-Beispiel:

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

 

 

Internet-Adressen

Um der Bildschirmtastatur auf Smartphones und Tablets den Backslash zur Verfügung zu stellen, sowie eine Auswahl einer Domain-Endung, verwendet man das Attribut type="url".

 

Tastatur-Layout für die Eingabe von URLs
Wird das Attribut type="url" verwendet, werden Punkt, Backslash und Domain-Endung mit angezeigt

 

Code-Beispiel:

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

 

 

Telefonnummern und Zahlen

Damit standardmäßig das Zahlenfeld auf einem Smartphone oder Tablet eingeblendet wird, kannst du die Attribute type="tel" oder type="number" verwenden. Das Attribut type="tel" erlaubt, neben den Zahlen, die Eingabe einiger Sonderzeichen (z.B. +), während bei Verwendung des Attributs type="number" lediglich Zahlen eingegeben werden können.

 

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

 

Code-Beispiel:

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

 

 

Platzhalter

Während man schon seit langem mit etwas JavaScript Platzhalter in seine Formularfelder integrieren kann, so funktioniert das ganze in HTML 5 mit dem einfachen Attribut placeholder="...". Der Vorteil ist, dass du auf das zusätzliche JavaScript verzichten kannst. Somit wird deine Website ein bisschen schneller geladen. Außerdem funktioniert der Platzhalter 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

 

Code-Beispiel:

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

 

Neben den jeweils angezeigten Grafiken habe ich auch ein Anzeigebeispiel für dich vorbereitet, so dass du die Effekte direkt auf deinem Mobilgerät ansehen kannst:

 

Anzeigebeispiel anschauen

 

 

Kommentar schreiben