Neue HTML5 Formular Tags

Mit der Einführung von HTML5 wurden auch erneuerungen für die Input Felder eingebaut. Unter anderem gibt es speziefische Felder für Email, Nummern (spez. Telefon), Suche und den Typ „pattern“. Pattern bietet vielseitige Möglichkeiten, die genaueren Funktion möchte ich in den folgenden Abschnitten erklären. Einige Felder die ich im Firefox getestet habe funktionieren noch nicht ganz ohne Probleme.

Inhaltsverzeichnis:

1. Email Feld
2. URL
3. Telefon Eingabe
4. Such Feld
5. Nummern Eingabe
6. Pattern

1. Email Feld

Viel hat sich hier nicht getan. Es sieht immer noch genau gleich aus. Neu soll die Prüfung auf die Korrektheit der Email sein. Ist die Email nicht korrekt, wird ein roter Rahmen angezeigt:

Unbenannt

Leider ist die Prüfung nicht gerade schön gelöst. Es wird einfach auf das @-Zeichen geprüft. Zumindest eine Prüfung auf korrekte Top-Level-Domain (TLD) hätte eingebaut werden können. So bleibt die Aufgabe wieder dem Webmaster überlassen.

<form id="HTML5">
<input type="email" id="Email" placeholder="Email Adresse" />
</form>

Wenn Sie möchten das mehrere Emails in das Feld eingetragen werden können, können Sie „multiple“ verwenden.

<form id="HTML5">
<input type="email" id="Email" placeholder="Email Adresse" multiple/>
</form>

Multiple“ kann auch bei anderen Input-Typen verwendet werden.

2. URL Eingabe

Die URL Eingabe funktioniert im prinzip wie die, der Email. Es wird auf eine gültige URL geprüft. Dabei ist dies genauso Simpel gelöst. Ein http:// genügt und es zählt als gültig. Wobei ein www.pcstuffblog.de als ungültig zählen würde.

<input type="url" id="URL" placeholder="URL" />

3.  Telefon Nummer

Kann noch nicht getest werden, da es unter keinem der gängigen Browsern funktioniert.

4. Das „Suchen“ Feld

Wie oben schon erwähnt, funktionieren nicht alle neuen Formular Typen unter allen Browsern. Dieser hier funktioniert z.B. nur unter dem Google Chrome Browser und Safari. Wichtig bei diesem Typ ist, das es alle CSS-Attribute überschreibt!

<input type="search" id="Search" placeholder="Ihre Sucheingabe" />

Unbenannt

Neu hinzugekommen ist also das „X“ am Ende der Textbox.

5. Nummern Feld

Ein geniales Feld für Smartphone-Nutzer. Denn es zeigt beim anwählen ein Nummernfeld und nicht die Standardeingabe-Tastatur wie es von Android gewohnt ist. Gerade für Mobile-Themes super, da es auch noch simple einzusetzen ist.

<input type="number" id="Nummern Eingabe" placeholder="Nummer" />

Unbenannt

Funktioniert bisher noch nicht im Firefox!

6. Pattern

Das beste kommt bekanntlich zum Schluss. Das Pattern Feld bietet zahlreiche Möglichkeiten. So kann z.B. auf ein gültige PLZ geprüft werden, oder auf ein ausreichendes Passwort. Somit entfällt lästiger Javascript-Code.

Die normale Syntax lautet so:

<input type="Pattern" id="pattern" pattern="<Hier Prüfung eingeben"/>

Möchten Sie z.B. nur Nummern zulassen dann funktioniert dass so:

pattern="^[0-9]$"/>

Da eine PLZ in Deutschland immer fünf Stellen hat, müssen wir das auch prüfen.

pattern="^[0-9]{5}$"/>

Die Zahl in den geschweifen Klammern, stellt also die Anzahl der Stellen dar. Es lassen sich aber auch z.B. von 4-6 angeben.

pattern="^[0-9]{4,6}$ />

Wichtig ist das nach dem Komma kein(!) Leerzeichen ist.

Möchten Sie Buchstaben zulassen muss in den Eckigen Klammern [A-Z] stehen Für klein Buchstaben [a-z].  Um z.B. zu erzwingen das zwei Zahlen eingegeben werden müssen und 3 Groß-/Kleinbuchstaben.

pattern="^[0-9]{2}[A-Z,a-z]{3}$" />

Um eine Passwortprüfung auf Groß-/Kleinbuchstaben und eine Zahl sowie 8 Stellen zu prüfen ist folgender Code notwendig:

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

Mehr Beispiel gibt es auf HTML5 Pattern.

Wer das ganze selber ausprobieren möchte kann das hier:

HTML5 Testseite >>

Wie aber im Artikel schon angemerkt, funktioniert nicht alles in jedem Browser.

Schreibe einen Kommentar

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