Kategorien
Design HTML/CSS

Formulare gestalten und validieren mit HTML5 und CSS3

Mit HTML5 und CSS3 lassen sich Formulare clientseitig validieren und Fehlermeldungen mit Hilfe neuer Pseudoklassen per CSS ausgeben. Neue Eingabetypen sowie die Möglichkeit, Pflichtfelder und Vorgaben bereits per HTML festzulegen, machen JavaScript für Validierungszwecke unnötig (jedenfalls irgendwann in der Zukunft…).

Anzeige

Vorgaben per HTML5 festlegen

Seit HTML5 gibt es viele neue Eingabetypen. So lassen sich spezielle Eingabefelder zum Beispiel für E-Mail-Adressen und URLs anlegen. Browser, die HTML5 unterstützen, können dann clientseitig prüfen, ob der eingegebene Wert zum Beispiel tatsächlich eine E-Mail-Adresse beziehungsweise eine URL ist:

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

Es lassen sich allerdings auch ganz individuelle Vorgaben für Eingabefelder definieren. Dank des „pattern“-Attributes können Eingabefelder um reguläre Audrücke erweitert werden. Der Browser prüft die Eingaben dieser Felder dann ebenfalls:

<input type="text" pattern="[0-9]{13,16}" />

Der im Beispiel dargestellte  Ausdruck  erwartet eine Zahl, die zwischen 13 und 16 Zeichen lang ist (zum Beispiel eine Kreditkartennummer). Eine Übersicht gängiger regulärer Ausdrücke für Formulareingaben liefert HTML5pattern. Auch Pflichtfelder lassen sich per HTML5 festlegen:

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

Auf diese Weise können viele Vorgaben vor dem Versand eines Formulars geprüft werden, ohne dass dafür JavaScript-Funktionen erforderlich würden. Eine serverseitige Überprüfung sollte trotz allem zusätzlich erfolgen, da die genannten HTML5-Validierungsmöglichkeiten leicht umgangen werden können.

Anzeige

Validierung von Formularen

Entspricht eine Eingabe nicht den hinterlegten Vorgaben, gibt der Browser beim Klick auf den Sendebutton noch vor dem Versenden des Formulars entsprechende Fehlermeldungen aus. In der Regel wird das Eingabefeld farblich hervorgehoben und ein Tooltip angezeigt, der den Benutzer über die fehlerhafte oder fehlende Eingabe informiert.


Clientseitige Fehlermeldung bei einem Eingabeformular
Wer die neuen Eingabetypen nutzen, aber auf eine clientseitige Validierung verzichten will, kann den Sendebutton mit dem Attribut „formnovalidate“ versehen:

<input type="submit" formnovalidate="formnovalidate" />

Das Attribut sorgt dafür, dass der Browser das Formular ohne clientseitige Validierung abschickt.

Gestaltung von Fehlermeldungen per CSS

Mit Hilfe der Pseudoklasse „:invalid“  lässt sich das Aussehen von Feldern mit ungültigen Eingaben anpassen. Außerdem gibt es die Pseudoklasse „:required“, mit der sich das Aussehen von Pflichtfeldern verändern lässt:

input:invalid {
  background-image: url("invalid.png");
  background-position: right;
  background-repeat: no-repeat;
  border: 1px solid red;
}
input:required {
  border: 2px solid black;
}


Per CSS3 gestaltete Formularfelder
Analog zu den Pseudoklassen „:invalid“ und „:required“ gibt es die Klassen „:valid“ und „optional“, mit denen sich Felder gestalten lassen, die explizit eine gültige Eingabe haben, beziehungsweise kein Pflichtfeld sind.

8 Kommentare zu “Formulare gestalten und validieren mit HTML5 und CSS3”

Der abschliessende Slash von XHTML ist bei HTML5 genauso unnötig (optional), wie die Doppelung eines Attributwertes der Art required=”required”. Es wäre in meinen Augen besser, in Zukunft in Codebeispielen die einfachere, nicht an XHTML erinnernde, Schreibweise zu nutzen.

Beide Schreibweisen sind ja gleichermaßen richtig. Aber in der Regel trifft man – da hast du Recht – auf die von dir angeregte Auszeichnung.

Ein paar Worte zur Browserunterstützung und der wirklich vorbildlichen Forschung von wufoo wären hier angebracht. Ebenso der Hinweis, dass das alles leider in Safari -egal ob Desktop oder iDevices, nicht wie gedacht funktioniert. Apple hat in seiner “Weisheit” die Validierung nur halb eingebaut. Es gibt sie, man muss sie aber mit JavaScript triggern.
Also ein bischen tiefer darfst Du schon gehen 😉

Ja, Safari ist hier mal außen vor. Aber bei allen HTML5-Elementen und -Attributen ist natürlich immer Vorsicht geboten, da nicht jeder immer mit den aktuellsten Browsern unterwegs ist.

Meint ihr denn der Safari lernt das noch? Wenn ich an einem Web-Projekt arbeite, das erst in ca. 2 Jahren fertig wird, würde ich natürlich am liebsten die momentan modernste Technik einsetzen…

Beim Eingabefeld für Kreditkarten_nummern_ sollte noch @type=”number” gesetzt werden. Geräte mit virtueller Tastatur bieten dann eine numerische an.

Schreibe einen Kommentar

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