Denis Potschien 12. April 2012

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…).

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.

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.

(dpe)

Denis Potschien

Denis Potschien

Denis Potschien ist seit 2005 freiberuflich als Kommunikationsdesigner tätig, seit Anfang 2010 im Kreativkonsulat in Iserlohn, einem Büro für Gestaltung und Kommunikation. Dort betreut er kleine und mittelständische Unternehmen ebenso wie kommunale Körperschaften und Organisationen aus Südwestfalen und dem Ruhrgebiet. Als Webdesigner und -entwickler gehören HTML5 und CSS3 zu seinen Kernthemen, weshalb er dazu 2013 ein Buch geschrieben hat. „Pure HTML5 und CSS3“ richtet sich an alle, die Vorkenntnisse haben, sich aber bisher mit HTML5 und CSS3 nicht oder nur am Rande beschäftigt haben.
Dr. Webs exklusiver Newsletter
Hinweise zum Datenschutz, also dem Einsatz von Double-Opt-In, der Protokollierung der Anmeldung, der Erfolgsmessung, dem Einsatz von MailChimp als Versanddienstleister und deinen Widerrufsrechten findest du in unseren Datenschutzhinweisen.

9 Kommentare

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

  2. Soweit prima Beispiel, aber wie bei allen HTML5-Goodies ist Info über die aktuelle Browserunterstützung absolut notwendig. Für dieses Bsp. dann wohl: http://caniuse.com/#feat=forms

  3. 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…

    • Wie denn mit JavaScript triggern? Hast du mal ein Beispiel? Danke!

  4. 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.

Schreibe einen Kommentar

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

Kennst du schon unseren Newsletter?

Hinweise zum Datenschutz, also dem Einsatz von Double-Opt-In, der Protokollierung der Anmeldung, der Erfolgsmessung, dem Einsatz von MailChimp als Versanddienstleister und deinen Widerrufsrechten findest du in unseren Datenschutzhinweisen.

Cookies

Weitere Informationen zu den Auswahlmöglichkeiten findest du hier. Dazu musst du zunächst keine Auswahl treffen!

Um Dr. Web zu besuchen, musst du eine Auswahl treffen.

Deine Auswahl wurde gespeichert!

Informationen zu den Auswahlmöglichkeiten

Was du erlaubst!

Um fortfahren zu können, musst du eine Auswahl treffen. Nachfolgend erhältst du eine Erläuterung der verschiedenen Optionen und ihrer Bedeutung.

  • Ich stimme zu:
    Du erlaubst uns das Setzen aller Cookies, die wir in unseren Datenschutzhinweisen genannt haben. Dazu gehören Tracking- und Statistik-Cookies. Aus dem Tracking per Google Analytics bieten wir auf der Seite Datenschutz ein Opt-Out, also die Möglichkeit der Abmeldung, an.
  • Ich stimme nicht zu:
    Wir verzichten bei dieser Option auf den Einsatz von Google Analytics. Die für den Betrieb von Dr. Web notwendigen Cookies werden aber dennoch gesetzt. Einzelheiten entnimmst du bitte den Datenschutzhinweisen

Du kannst deine Cookie-Einstellungen jederzeit hier ändern: Datenschutz. Impressum

Zurück