inputPattern

Formularfelder validieren

Diese Tutorials ist sicher nicht perfekt, aber ich hoffe, dass es trotzdem hilfreich für dich ist. Dies war ursprünglich ein ausschließlich deutsches Handbuch, daher sind viele Beispiele für Nutzer aus Deutschlad optimiert. Im Laufe der Zeit werden einige Muster aus anderen Regionen der Welt hinzugefügt.

Thank you for using it.

Jeder Webdesigner hat in seiner Laufbahn schon etliche Formulare erstellt. Dazu wurde wahrscheinlich ein mehr oder weniger komplizierter JavaScript-Code eingebunden, um vor dem Absenden des Formulars zu überprüfen, ob die eingegebenen Werte gültig sind und ob alle erforderlichen Felder ausgefüllt wurden.

Das ist jetzt etwas einfacher geworden. Mit HTML5 können Eingabe-Felder in Web-Formularen bereits bei der Eingabe vom Browser mit einem Muster, das die Gültigkeit der Eingabe beschreibt, verglichen werden. Für eine clientseitige Formularvalidierung nutzt Du heute einfach die neuen Attribute wie pattern und required. Zusammen mit CSS3-Selektoren für die optischen Effekte wird das Schreiben von Prüfmechanismen und die Meldung von fehlerhaften Eingaben wesentlich vereinfacht. Die Muster sind also wie Schablonen in die die eingegebenen Daten passen müssen.

Das Erstellen eines Musters (eines pattern) ist eine kleine Hürde für den Webseitengestalter. Selbst wenn er ein CMS, eine Blogsoftware, ein Redaktionssystem nutzt, die Pattern muss er (noch) selbst erstellen. Sind fertige Lösungen schon eingebaut, muss er sie zumindest prüfen und verstehen.
Laut den Vorgaben des World Wide Web Consortium (W3C) werden die Regular Expressions der ECMAScript Language (JavaScript) angewandt. Aber es gibt kleine Unterschiede, die natürlich im Tutorial angesprochen werden.

Mit Formular-Pattern und einen guten Browser kann man erstaunlich viel testen, trotzdem muß eine weitere Prüfung der eingegebenen Daten, wie zum Beispiel die Berechnung einer Prüfziffer und die Plausibilität immer noch zusätzlich durchgeführt werden.

Natürlich ist es wie immer. Nicht alle Browser haben die Prüfung komplett und richtig implantiert. Aber das wird in Zukunft sicher besser werden.

Regular Expressions

Der Muster-Vergleich mit regulärer Ausdrücken wird seit langem in diversen Programmiersprachen genutzt, und es gibt etliche Tutorials dazu.
Ein regulärer Ausdruck (englisch regular expression, Abkürzung: RegExp oder Regex) ist in der Informatik eine Zeichenkette, die der Beschreibung von Mengen von Zeichenketten mit Hilfe bestimmter syntaktischer Regeln dient. Reguläre Ausdrücke finden vor allem in der Softwareentwicklung Verwendung. Neben Implementierungen in vielen Programmiersprachen verfügen auch viele Texteditoren über reguläre Ausdrücke in der Funktion „Suchen und Ersetzen“. Ein einfacher Anwendungsfall von regulären Ausdrücken sind Wildcards (Platzhalter), die fast jeder kennt. "*.pdf" in des Suchfeld eingegeben und es werden alle PDF-Dateien gefunden.

Reguläre Ausdrücke können als Filterkriterien in der Textsuche verwendet werden, indem der Text mit dem Muster des regulären Ausdrucks abgeglichen wird. Dieser Vorgang wird auch Pattern Matching genannt. So ist es beispielsweise möglich, alle Wörter aus einer Wortliste herauszusuchen, die mit S beginnen und auf D enden – ohne die dazwischenliegenden Buchstaben oder deren Anzahl explizit vorgeben zu müssen.

In diesem Tutorial geht es ausschließlich um die Muster (die pattern), die der Screendesigner bei der Erstellung eines Web-Formulars dem Browser als Vergleichsmuster zur Verfügung stellt. Das "Form input pattern".

Anleitung

Mustermacher

Eine kleine Anleitung zum Schreiben von Mustern für HTML5 Formulare.

So geschrieben wie ich es verstanden habe. Es erhebt keinen Anspruch auf Richtigkeit und Vollständigkeit.

Übungen

Musterschüler

Input Pattern im Eigenbau.

Ein paar Trainingseinheiten. Schritt für Schritt zum Mustermacher.

Musterbuch

Musterkollektion

Input Pattern im Fertigbau. Eine wachsende Sammlung von Mustern für HTML5 Formulare.

Beispiele aus dem realen Leben. Mit Erläuterungen. Zum kopieren und als Vorlagen zum Weiterentwickeln.

Social Media

Multiplikatoren

Follow - like it - love it - use it.

  

Datenschutz

Impressum