In diesem Beitrag möchte ich ein paar neue und praktische HTML5-Features für Formulare zeigen, die man bedenkenlos heute schon einsetzen kann. Die Browser, die diese neuen Funktionalitäten noch nicht unterstützen, ignorieren die Neuigkeiten einfach, während User, die Safari, Chrome oder auch Opera einsetzen, von den neuen Möglichkeiten profitieren. Für die eMail- und URL-Validierungen ist es allerdings sinnvoll und empfehlenswert, eine Fallback-Validierung vorsehen.

1. das Attribut autofocus
autofocus kann als Attribut für ein beliebiges Formularfeld verwendet werden und es tut genau das, was man erwartet: der Cursor wird automatisch onload in diesem Formularfeld gesetzt, man braucht kein extra Javascript mehr dazu wie bisher.

<input type="text" name="firstname" autofocus />

2. das Attribut placeholder
placeholder kann dazu benutzt werden, um ein Textfeld mit einem Default-Wert zu belegen. Sobald der User in das Formular-Feld klickt, verschwindet der Text wie gewohnt, funktioniert also nun auch ohne Javascript.

<input type="text" name="lastname" placeholder="Egger" />

3. type url
Ein Input-Feld kann nun  auch vom Typ „url“ sein. Automatisch wird das Feld auf eine gültige Web-Adresse hin validiert. Opera zeigt zusätzlich ein URL-Icon innerhalb des Formularfeldes an. Wenn man mit dem iPhone-Safari auf so ein Formular kommt und ins Feld klickt, zeigt die Tastatur automatisch die dafür meinst gebrauchten „.com“, „.“ und „/“ Buttons.

<input type="url" name="url" />

4. type email
Ein Input-Feld kann nun  auch vom Typ „email“ sein. Automatisch wird das Feld auf eine gültige eMail-Adresse hin validiert. Opera zeigt zusätzlich ein eMail-Icon innerhalb des Formularfeldes an. Wenn man mit dem iPhone-Safari auf so ein Formular kommt und ins Feld klickt, zeigt die Tastatur automatisch die dafür meinst gebrauchten „@“ und „.“ Buttons.

<input type="email" name="email" />

Browser-Validierung ohne zusätzliches Javascript