Interaktion mit dem Benutzer ist bei modernen Webseite nicht mehr wegzudenken. Daher ist es wichtig Eingaben in Webformulare so einfach wie möglich zu gestalten. Mit Hilfe von externen Tools wie z.B. jQuery können sinnvolle Hilfen in Formulare ergänzt werden. Der neue HTML5-Standard bringt nun auch viele hilfreiche Elemente und Funktionen von sich aus mit. Einige davon schauen wir uns in diesem Beitrag an.
Neue Eingabeelemente
Formulare bestehen oft nur aus Textfeldern, Selects oder Checkboxen. Sollen andere Elemente, wie z.B. ein Kalender zur Auswahl eines Datums, genutzt werden musste dieses bisher über eine Javascript-Lösung nachgebaut werden. HTML5 bietet dafür von sich aus neue Eingabeelemente.
<input type=“color“>
<input type="range">
| <input type=“date“>
<input type="number">
|
Dazu gekommen sind auch die Feldtypen tel, url und email. Diese sind normale Textfelder die aber bei mobilen Geräten die entsprechend passende Bildschirmtastatur (z.B. Zahlenfeld bei tel) anzeigen lassen.
Platzhalter in Formularelementen
Damit ein Benutzer besser versteht welche Eingabe genau von ihm verlangt wird kann die Verwendung von Platzhaltern in Formularelementen sinnvoll sein. Diese Platzhalter enthalten einen kleinen Hinweis für den Benutzer und verschwinden beim Klick in das entsprechende Feld.
<input type="text" placeholder="Mindestens 8 Zeichen"/>
|
Vorschläge mit Datalist
Autocomplete ist eine bekannte Funktion die alle Webbrowser zur Verfügung stellen. Eingegebene Daten werden gespeichert und an passender Stelle erneut zur Eingabe in anderen Feldern vorgeschlagen. Mit der Datalist von html5 kann man auf diese Vorschlagsliste Einfluss nehmen und ergänzen. Das Beispiel ergänzt ein Textfeld um die Vorschläge zur Eingabe seines Lieblingsschauspielers.
<input type="text" name="actor" list=actorList"> <datalist id="actorList"> <option value="Will Smith"> <option value="Harison Ford"> <option value="Robert de Niro"> </datalist>
|
Formularvalidierung
Die Prüfung von Benutzereingaben ist ein wichtiger Punkt bei der Verarbeitung von Formularen. Mit HTML5 ist es möglich Benutzereingaben im Browser zu prüfen und den Benutzer auf eventuelle Fehler hinzuweisen. Die Validierung lässt sich auch beliebig auf eigene Regeln für Eingaben anpassen. Auch die Anpassung der Fehlermeldung ist möglich.
<input type="text" required">
|
Browserkompatibilität
Aktuell unterstützt kein Browser alle hier aufgeführten Elemente. Trotzdem ist es sinnvoll diese jetzt schon zu verwenden. Kann ein Browser ein neues Element nicht anzeigen so wird doch zumindest ein normales Textfeld angezeigt und das Formular bleibt trotzdem nutzbar. Sobald der Browser dann das entsprechende Element nachrüstet wird es auch mit der vollen Funktion angezeigt.