Auch für Formulare bietet HTML5 einige ungeheuer praktische Features, mit denen sich der Web-Entwickler das Leben nicht nur leichter, sondern die Web-Applikation auch sicherer machen kann.
Besonders praktisch ist, dass man nicht daran denken muss, JavaScripts für die Validierung einzubinden und den Elementen die korrekten Classes zuzuweisen, um die Validierung zu bewirken, sondern alle Funktionen sind bereits im HTML5 Kern enthalten. Besonders Bonbon ist, dass die Validierungs-Nachricht automatisch in der Sprache des Betriebssystems – und damit der bevorzugten Sprache des Users – ausgegeben wird; eine erhebliche Erleichterung bei der Lokalisierung von Inhalten.
Wir stellen die wichtigsten Mittel vor, die man zur Validierung und Gestaltung von HTML5 Formularen verwenden kann
Form Validation – einfach valide Formulare
Zu den größten Segnungen des HTML5 Zeitalters zählt die ‚form validation‘, also die Überprüfung von Formularfeldern und das Verhindern des Versands, wenn irgend etwas nicht stimmt. Im einfachsten Falle verwendet man dafür ein ganz schlichtes und einfaches
required
Dieses wird gänzlich unkonform mit prähistorischen HTML Zeiten einfach ins Input geschmissen:
<input name='foo' required />
Möchte man etwas spezifischer sein, kann man auch eine ganze Latte von input-typen definieren
Die wichtigsten HTML5 input-types
Bekannt ist die Definition des types ‚text‘ und an der Form ändert sich auch nichts:
<input type="text" />
Neu ist in HTML5, dass man sehr differenzierte Typen festlegen kann, die dann auch entsprechend validiert werden, z.B.
<input type="email" >
Ein Inputfeld dieses Types wird beim absenden des Formulares also nicht nur daraufhin überprüft, dass es etwas enthält, sondern es muss sich um eine formal korrekte e-Mail-Adresse mit @ handeln.
Weitere hilfreiche input types, die bereits in der Praxis verwendet werden können:
- date
- datetime
- time
Kompatibilität von form-validation mit HTML5
Bis auf Safari unter iOS und den integrierten Android-Browser können alle übrigen mit der clientseitigen HTML5 Validierung umgehen. Alle Details unter CanIuse/form-validation
Platzhalter-Texte mit dem placeholder Attribut
Noch etwas, das man bisher nur per JavaScript basteln konnte und jetzt äußerst elegant umzusetzen ist, sind Platzhaltertexte in den Inputfeldern.
Damit lässt sich dem User ganz intuitiv sagen, was er einfüllen soll, ohne extra Klicks, Hilfefenster oder Mouseovers-Hilfetexte. Im HTML5 Code sieht das placeholder-Attribut so aus:
<input name="foobar" placeholder="Foobar eingeben" />
Und so würde das „foobar“ Feld mit Placeholder-Text im Browser aussehen:
Kompatibilität des HTML5 Placeholder-Attributs
Alle aktuellen Browsergenerationen sind voll kompatibel mit dem Placeholder-Attribut. Details unter CanIuse/Placeholder
Eine Antwort auf HTML5 Formulare mit Validierung und Platzhalter