Formular – Eingabefelder : Datum, Email, Suche

Formular und Touch-Device

Wenn Formulare auf mobilen Geräten landen, sind die wiederspenstigen Eingabefelder eine Bremse:

Immer wieder umschalten zur numerischen Tastatur, weil Ziffern, Sonderzeichen oder Emailadressen eingegeben werden. Mit neuen Input Types bringt HTML5 Komfort in HTML-Formulare.

HTML5 hat neue Attribute für Formulare mitgebracht, die heute problemlos eingesetzt werden können. Trotzdem werden die Formulare selbst auf ganz alten Browsern ohne HTML5-Support einwandfrei funktionieren: IE7 und IE8 interpretieren die Attribute für input type=“xxx“ als normale Textfelder.

<input type='email' … > oder 
<input type='date' … /> 

Zu den neuen Typen von Eingabefeldern in HTML-Formularen gehören

color
date
datetime
datetime-local
email
file
image
month
number
range
search
tel
url
week
 

input type number, date, email

<label style="padding:20px;background:#C4D6E0">
   <input type="number" autofocus size="3" value="" /></label>

<label style="padding:20px;background:#C4D6E0">
   <input type="date" value="" /></label>

Nicht alle Desktop-Browser machen schon alles mit – Chrome und Opera sind voll dabei, Safari auf dem Desktop hält sich zurück, aber unter iOS funktioniert das prima.

Diese Typen ändern das Verhalten des Eingabefelds. Ein Eingabefeld vom Typ number erwartet Ziffern und nichts anderes, ein Input-Feld vom Typ date wird auf einem mobilen Gerät direkt das Wahlrad für das Datum öffnen oder einen Kalender zur Verfügung stellen.

Das entbindet zwar nicht von der Validierung der Eingaben, aber erleichtert Benutzern mit modernen Browsern sowie dem Smartphone oder Tablett die Eingabe.

Dem label-Tag gebührt übrigens ein ordentliches padding im CSS, damit die Eingabefelder auf kleinen Monitoren dem Finger eine größere Angriffsfläche bieten.

Datum in Eingabefeldern

Die Eingabe eines Datums oder gar eines Zeitraums erfordert immer eine aufwändige und trickreiche Validierung und muss mit Plugins (etwa mit einem jQuery-Kalender) aufbereitet werden.

jQuery Input Calendar auf iPad

Dummerweise kollidieren die Plugins mit den eingebauten einfachen Wahlrädern für das Datum. Kalender wie die typischen jQuery-Kalender sind wiederum auf den mobilen Geräten nicht benutzerfreundlich – sie sind viel zu klein. Wir brauchen also eine Abfrage, ob der Browser input type=“date“ unterstützt.

Dive into HTML5 hat eine einfache Lösung für die Abfrage nach der Unterstützung der HTML5-Eingabefelder:

Ein Javascript erzeugt ein Eingabefeld vom jeweiligen Typ und lässt sich den Typ sofort zurückgeben.

var i = document.createElement('input');
i.setAttribute('type','date');
	
if (i.type == 'text') {
	var date = document.getElementById('date');
	date.setAttribute('type','text');
	date.setAttribute('class','datepicker');
}

Wenn der Browser den gefragten Typ nicht unterstützt, wird er bei der Abfrage des Typs einfach „text“ zurückgeben.

Jetzt bringt Chrome das Eingabefeld für das Datum aus eigener Kraft, Safari unterstützt das Eingabefeld vom Typ date nicht und nutzt den jQuery-Kalender, auf dem iPad hingegen kommt das große Wahlrad dicken Fingern entgegen.

Input type date auf iPad

autofocus und placeholder

<label><input type="number" autofocus size="3" value="" /></label>

Das Attribut autofocus ersetzt das Javascript, mit dem wir das erste Eingabefeld in einem Formular aktivieren. autofocus kann die Werte true oder false annehmen. Es reicht, autofocus ohne explzites true zu notieren.

Natürlich müssen die Eingaben dennoch validiert werden – aber was zählt, ist der schlanke Ablauf und Komfort in modernen Browsern und auf mobilen Geräten. Das Ändern des Input-Typs kostet keinen Mehraufwand bei der Programmierung des Formulars und erfordert keine besondere Behandlung für alte Browser, die diese Felder als normale Eingabefelder interpretieren.

Es gibt also keinen Grund, die neuen HTML5-Input-Types weiterhin links liegen zu lassen.

SITEMAP BLOG