HTML5 Formulare mit Validierung und Platzhalter

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:

html5-form-placeholder

Kompatibilität des HTML5 Placeholder-Attributs

Alle aktuellen Browsergenerationen sind voll kompatibel mit dem Placeholder-Attribut. Details unter CanIuse/Placeholder

Dieser Beitrag wurde unter HTML5 veröffentlicht. Setze ein Lesezeichen auf den Permalink.

Eine Antwort auf HTML5 Formulare mit Validierung und Platzhalter

  1. Harry sagt:

    Trotz Blick nach vorn würde ich auch immer noch ein Fallback für die Browser ergänzen, die die o.a. Features noch nicht unterstützen.

Schreib einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind markiert *