HTML5: input email und Validation Bubbles mit CSS gestalten

Diese Seite ist Teil einer Artikelserie, die sich mit der Gestaltung von HTML5-Formularen beschäftigt.

• Teil 1: Das Required-Attribut
• Teil 2: Das Placeholder-Attribut
• Teil 3: Der Input-Typ email
• Teil 4: Der Input-Typ url

Der Input-Typ email

Neben dem required- und dem placeholder-Attribut bringt HTML5 mit Feldern vom Typ email (input[type="email"]) und url (input[type="url"]) weitere praktische Neuerungen mit. Moderne Browser führen bei Formularfeldern dieser beiden Typen bereits vor dem Versenden eine automatische Validierung durch und überprüfen, ob es sich bei der Eingabe des Nutzers auch tatsächlich um eine E-Mail-Adresse oder eine URL handelt. Bei einer fehlerhaften Eingabe informiert der Browser den Nutzer nach dem Klicken des Formular-Buttons in einer Info-Blase über das Problem.
Eine serverseitige Prüfung ist allerdings weiterhin nötig, beispielsweise um bösartige Skriptbasteleien zu erkennen. Die HTML5-Input-Typen ermöglichen es aber erstmals ohne weitere Scripte, Forminhalte vor dem Versenden auf ihre Richtigkeit hin zu überprüfen.

Darstellung der Infoblase

Wie man das Formularfeld mit CSS gestaltet, habe ich bereits in einem Artikel über das requi­red-Attri­but beschrieben. Dieser Text geht daher nur auf das Design der Infoblase ein. Die Info Bubble wird von den Browsern nicht konsistent dargestellt. Dass der Internet Explorer input-Typen überhaupt nicht unterstützt, überrascht sicher niemanden.

Wird keine valide E-Mail-Adresse in das Formularfeld eingegeben, so signalisiert dies Chrome mit einer so genannten info bubble.

Die info bubble unterscheidet sich von Browser zu Browser. Hier im Bilde: Firefox.

Infoblase mit CSS gestalten

Zumindest für Webkit-Browser (z. B. Chrome) kann mit folgenden CSS-Angaben das Aussehen der Infoblase verändert werden:

::-webkit-validation-bubble {}
::-webkit-validation-bubble-message {}
::-webkit-validation-bubble-arrow {}
::-webkit-validation-bubble-arrow-clipper {}
::-webkit-validation-bubble-icon {}
::-webkit-validation-bubble-body {}
::-webkit-validation-bubble-text-block {}
::-webkit-validation-bubble-arrow-heading {}


Bei­spiele

Beispiel 1: Mit CSS kann die Infoblase optisch ansprechender gestaltet werden. In diesem Beispiel – der Quellcode findet sich weiter unten – zieht das Rot der Infoblase sofort die Aufmerksamkeit des Nutzers auf sich.

Beispiel 2: Eine nicht ganz so aufdringliche Infoblase – ebenfalls mit CSS gestaltetet.

Live-Demos

• Demo 1 anse­hen (Funktioniert nur mit Chrome)
• Demo 2 anse­hen (Funktioniert nur mit Chrome)

Dateien

• Beispiel 1: Alle Dateien als Zip-Archiv herunterladen
• Beispiel 2: Alle Dateien als Zip-Archiv herunterladen
• index.html (Beispiel 1)
• index.html (Beispiel 2)

HTML5-Code

<p>E-Mail-Adresse:</p>
<form>
	<input type="email" name="email" required placeholder="name@domain.tld" style="width:200px;">
	<input type="submit" />
</form>

Beispiel 1: CSS3-Code

<style type="text/css">
::-webkit-validation-bubble-icon {display:none;}
::-webkit-validation-bubble-message {
	background-color:#d73e3e;
	background-image:-webkit-linear-gradient(#d73e3e 50%, #c12828 100%);
	border:1px solid #962222;
	-webkit-border-radius:8px;
	box-shadow:rgba(0,0,0,0.5) 0 1px 6px, inset rgba(255,51,46,0.8) 0 1px 0px;
	color:#ececec;
	font:13px "Segoe UI",Arial,sans-serif;
	padding:8px;
	text-shadow:#a12525 0 -1px 0;
	top:-4px;
	-webkit-user-select:none;  
}
::-webkit-validation-bubble-arrow {
	background-color:#d73e3e;
	border:1px solid #962222;
	border-right:none;
	border-bottom:none;
	display:inline-block;
	-webkit-box-shadow:none;
	left:30px;
	top:3px;
	height:13px;
	width:13px;	
}
::-webkit-validation-bubble-arrow-clipper {height:17px;}
</style>

Beispiel 2: CSS3-Code

<style type="text/css">
::-webkit-validation-bubble-icon {display:none;}
::-webkit-validation-bubble-message {
	background-color:#71645a;
	background-image:-webkit-linear-gradient(#71645a 50%, #4d4239 100%);
	border:1px solid #261913;
	-webkit-border-radius:8px;
	box-shadow:rgba(0,0,0,0.5) 0 1px 6px, inset #aaa4a0 0 1px 0px;
	color:#ececec;
	font:13px "Segoe UI",Arial,sans-serif;
	padding:8px;
	text-shadow:#231f1b 0 -1px 0;
	top:-4px;
	-webkit-user-select:none;  
}	
::-webkit-validation-bubble-arrow {
	background-color:#71645a;
	border:1px solid #261913;
	border-right:none;
	border-bottom:none;
	display:inline-block;
	-webkit-box-shadow:none;
	left:30px;
	top:3px;
	height:13px;
	width:13px;	
}	
::-webkit-validation-bubble-arrow-clipper {height:17px;}
</style>

Wei­ter zu Teil 4 die­ser Serie: Der Input-Typ url

Über den Autor

Marco Bardenheuer: Auf skybeam.de schreibt Marco über Webentwicklung, Webdesign und Internetmarketing. Verpasse keine Neuigkeiten über User Experience Design, Web Development und die Startup-Szene: Folge Marco jetzt auf Google Plus!



2 Kommentare

1. Stefan

   schrieb am 1. Juni 2012 um 13:58 Uhr (#)

   Hallo,

   erstmal herzlichen Dank für die ausführliche Anleitung, hervoragend dargestellt, hat mir schon sehr geholfen!

   Die Info-Bubbel wird bei mir allerdings nicht angezeigt, bzw.sehe ich nur den oberen Teil der Bubble der Rest ist unter dem nächsten Listenelement versteckt!
   Nutze jqtouch u. jquery denke das es hierbei irgendwo hackt.

   Hat jemand eine Idee zur Behebung?
   LG, Stefan

   Auf diesen Kommentar antworten
2. Marco

   schrieb am 2. Juni 2012 um 20:59 Uhr (#)

   Du könntest mal versuchen, der Info Bubble einen z-index zu geben:

   position:absolute;
z-index:1;

   Hast du einen Link zu der entsprechenden Seite?

   Auf diesen Kommentar antworten