Das korrekte Ausfüllen von Formularen ist ein wichtiges Kriterium bei der Gestaltung und Programmierung von Formularen und deren Verarbeitung. Gerade bei Bestellungen ist es wichtig, dass bestimmte Felder (zum Beispiel die Anschrift) ausgefüllt werden. Um fehlerhafte Eingaben zu vermeiden, werden Eingaben oftmals vor dem Absenden auf Korrektheit überprüft (zum Beispiel bei E-Mail-Adressen).

Bei einer clientseitigen Überprüfung musste bislang immer auf JavaScript gesetzt werden, da HTML keine Möglichkeiten mitbrachte. Mit HTML5 hat sich dies geändert. Unter anderem wurden neue Formulartypen eingeführt – unter anderem für E-Mail-Adressen. So lässt sich clientseitig feststellen, ob eine Angabe eine syntaktisch gültige E-Mail-Adresse handelt.

Mit dem neuen Attribut „pattern“ lassen sich individuelle Vorgaben für Formulareingaben definieren. Über reguläre Ausdrücke lassen sich auf diese Weise beliebige Vorgaben machen. Möchte man zum Beispiel die Umsatzsteuer-Identifikationsnummer eines Unternehmens abfragen, lässt sich über folgendes Eingabefeld eine entsprechende Eingabevorgabe festlegen:

<input type="text" name="ustidnr" pattern="^[A-Z]{2}[0-9A-Z]{1,12}$" />

Die Umsatzsteuer-Identifikationsnummer beginnt immer mit zwei Großbuchstaben („[A-Z]{2}“) gefolgt von bis zu zwölf alphanumerischen Zeichen („[0-9A-Z]{1,12}“). Mit der Angabe dieses „pattern“-Attributes lässt sich so verhindern, dass jemand fälschlicherweise seine normale Steuernummer angibt.

Auf der Seite HTML5Pattern gibt es eine ganze Reihe von vorgefertigten regulären Ausdrücken, mit denen sich zum Beispiel die Syntax von Kreditkartennummern und IP-Adressen validieren lassen:

<input type="text" name="kreditkartennr" pattern="[0-9]{3,16}" />
<input type="text" name="ipadresse" pattern="((^|\.)((25[0-5])|(2[0-4]\d)|(1\d\d)|([1-9]?\d))){4}$" />

Auch bei Registrierungsformularen, bei denen der Benutzer ein Kennwort festlegen muss, bietet sich ein „pattern“-Attribut an. Darüber lässt sich dann beispielsweise festlegen, welche Mindestvoraussetzungen das Kennwort erfüllen muss:

<input type="password" name="kennwort" pattern="(?=^.{8,}$)((?=.*\d)|(?=.*\W+))(?![.\n])(?=.*[A-Z])(?=.*[a-z]).*$" />

Das Beispiel verlangt ein Kennwort, das aus Buchstaben und Zahlen sowie einem Sonderzeichen besteht und eine Mindestlänge von acht Zeichen hat.

Stimmt die Formulareingabe nicht mit dem regulären Ausdruck überein, wird ein entsprechender Hinweis über einen Tooltip ausgegeben:

Auch verpflichtende Eingabefelder ließen sich vor HTML5 nur per JavaScript (bei clientseitiger Prüfung) definieren. HTML5 bietet auch hierfür mit „required“ ein neues Attribut:

<input type="text" name="sonstiges" required="required" />

Formulare mit dem „required“-Attribut werden nicht anders dargestellt. Über CSS lassen sich Pflichtfelder jedoch sehr einfach hervorheben:

input[required] {
  border-color: red;
}

Wird ein Pflichtfeld nicht ausgefüllt, erscheint – wie auch bei einer fehlerhaften Eingabe – ein Tooltip, welches auf die fehlende Eingabe hinweist:

Die neuen Attribute „pattern“ und „required“ ermöglichen endlich, Formulare ohne JavaScript um Eingabevorgaben zu erweitern. Wer jedoch auf Nummer sicher gehen möche, sollte Formulareingaben zusätzlich serverseitig prüfen. Denn Formulare lassen sich manipulieren. Und Browser, die HTML5 noch nicht unterstützen, ignorieren die „pattern“- und „required“-Angaben einfach.

Was haltet ihr von den neuen Attributen für Formularvorgaben? Setzt ihr sie ein oder verlasst ihr euch auf JavaScript und beziehungsweise oder serversetige Prüfung der gemachten Eingaben?