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: Selbst 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
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 – da müssen oft Plugins oder Libraries dem Entwickler zur Hand gehen.
Dummerweise kollidieren die Plugins mit den eingebauten einfachen Wahlrädern für das Datum. Kalender wie die typischen jQuery-Kalender sind auf den mobilen Geräten oft nicht benutzerfreundlich weil 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. Die immergrünen Browser unterstützen das Datumfeld allerdings aus eigener Kraft und selbst alte Handys – z.B. ein iPhone 5 – brauchen keinen Beistand seitens aufwändiger Libraries und Abgründen von verschachtelten DIV-Elementen.
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.
Mehr zu Formularen in Webseiten
HTML progress, meter, output setzen visuelle Hilfsmittel ins HTML-Markup und werden mit wenigen Zeilen Javascript in Gang gesetzt.
HTML Formular und PHP – Am Ende steht fast immer PHP hinter der Formularverarbeitung. Auch wer sich nur ums Frontend kümmert, sollte die Funktionsweise der Formularverarbeitung ergründen.
input-Attribute: datalist und autocomplete Die Browser speichern Eingaben in für eine erneute Nutzung und bieten ein automatischen Vervollständigen.
Externe Quellen
Simple Secure Spam-Free Contact Form in PHP – Iris Gute Hinweise für sichere Kontaktformulare