Formular Workshop
Lerne das Erstellen von HTML-Formularen für deinen Onlex-Formmailer
HTML5 Attribut ''
pattern''pattern
Stand:
Mit dem
pattern Attribut wurde in HTML5 ein sehr mächtiges aber auch vor Allem sehr nützliches Attribut integriert, welches die Formulareingaben überprüfen kann.Hierzu werden so genannte Reguläre Ausdrücke (RegExp) verwendet, die eine Zeichenkette nach einem vorgegebenen Muster durchsucht und für korrekt oder nicht korrekt befindet.
Ein Beispiel kann sein, dass eine Telefonnummer kontrolliert werden soll.
Soll die einzugegebene Telefonnummer einem bestimmten Format entsprechen, könnte es wie folgt aussehen.
Format: Schweizer Festnetznummer (mit möglicher Landesvorwahl +41)
Die Anforderungen:
Die Telefonnummer muss
- mit einer 0 oder der Landesvorwahl "+41" und einem Leerzeichen beginnen
- darf als zweites und drittes Zeichen nur eine bestimmte Gruppe an von Zahlenfolgen enthalten (hier: die Vorwahlnummern der Schweiz)
- danach folgen drei Zeichen mit Ziffern mit einem folgendem Leerzeichen
- danach folgen zwei Ziffern mit einem folgendem Leerzeichen und weiteren zwei Ziffern. Diese beiden Zifferngruppen beinhalten jeweils Zahlen von 0 bis 9
Als regulärer Audruck würde es wie folgt aussehen:
(0|\+41 )(21|22|24|26|27|31|32|33|34|41|43|44|51|52|55|61|62|71|81|91) \d{3} \d{2} \d{2}
Als Anwendungs-Beispiel:
z.B.: 021 123 45 67
Quelltext-Auszug:
<input type="tel" title="z.B. 021 123 45 67" name="telefon" pattern="0(21|22|24|26|27|31|32|33|34|41|43|44|51|52|55|61|62|71|81|91) \d{3} \d{2} \d{2}" size="30">
Allgemeine Anmerkung zum obigen Beispiel: Bei der Recherche wie eine Schweizer Festnetznummer aufgebaut ist, war auffällig, dass das 4. bis 6. Zeichen nicht kontinuierlich mit Ziffern von 0 bis 9 versehen sind. Hierdurch verkompliziert es das Ganze eine adäquate Abfrage zu tätigen ;-)
Zum besseren Verständnis:
https://www.eofcom.admin.ch/eofcom/public/searchEofcom_e164Allocated.do
→ Vollständige Liste der Parameter anzeigen lassen ;-)
Eine Auflistung weiterer möglicher Abfragen findest du auf www.html5pattern.com.
Auf dieser Seite wird nicht genauer auf Reguläre Ausdrücke eingegangen. Der eingangs erwähnte Wikipedia Artikel bietet hier eine sehr gute Erklärung und Hilfestellung.
Zusätzlich können wir die Seite www.regexe.de empfehlen.
↑ zum Seitenanfang ↑