3 x Trick 17: Twitter-Sharing, E-Mail-Formularfelder & Outlook-Hintergrundbilder

©

Kleinvieh macht ja bekanntlich auch Mist ;-) – anbei drei kleine aber feine Kniffe, die a.) vielleicht noch weniger bekannt sind und mit denen zugleich b.) evtl. der E-Mail-Output noch optimiert werden kann.

Neu und mächtig - Formularfelder vom Typ „email“:

In HTML-Onlineformularen zur Newsletter-Anmeldung sollte das E-Mail-Adressfeld künftig nicht mehr als vom Standard-Typ „text“, sondern als vom Typ „email“ (1) implementiert werden.

Hintergrund: Der aktuelle HTML5-Standard beinhaltet explizit auch diese neue Klasse (vgl. Doku auf w3c.org) und nach und nach dürfte sie auch von den verbreiteten Browsern berücksichtigt werden, sodass die damit verbundenen Vorteile ausgerollt werden.

Allen voran die Möglichkeit, E-Mail-Adressen ohne aufwändiges JavaScript direkt bei der Eingabe grob auf Validität überprüfen zu können. Hierzu muss das Attribut „required“ (2) angegeben werden. Zwar hängt es vom verwendeten Browser ab, ob und wie tiefgehend die Gültigkeits-Überprüfung tatsächlich vonstattengeht. Aber grobe Schnitzer (z. B. @ vergessen, kein Domain-Punkt, Leerzeichen, …) könnten auf diese Weise bald sehr einfach bereits bei der Eingabe vermieden werden. Daneben sind über das Attribut „pattern“ aber auch selbst definierte Einschränkungen anhand regulärer Ausdrucke möglich (4). Hiermit kann bspw. auf unerwünschte Domains (z. B. trash-mail, spamgourmet, …), geprüft werden und vieles mehr. Der „placeholder“ (3) erscheint übrigens als Hinweistext, falls das Feld keinen Fokus hat.

Eine letzte Besonderheit: Das iPhone blendet mit als erstes mobiles Endgerät bei E-Mail-Formularfeldern direkt auch die passende Tastatur ein – mit prominentem @ und ohne Zeichen, die sowieso ungültig wären (5) (z. B. Space). Damit wird die E-Mail-Eingabe unterwegs vereinfacht.