John Smith with a flacon of HTML N°5 perfume

HTML5

≻ Leitfaden für Webentwickler

Kapitel 3: Intelligente Formulare

Auf dieser Seite finden Sie alle im Buch HTML5: Leitfaden für Webentwickler verwendeten Beispiele, Grafiken und Links für dieses Kapitel. Die erste Tabelle listet Beispiele und Grafiken mit Seitenzahlen im Buch auf, stellt Links (sofern relevant) zur Online-Version der Seite sowie Angaben zur Browserkompatibilität bereit und zeigt eine Vorschau der Abbildung im Buch. Beim Klick auf dieses Vorschaubild wird die Abbildung in Originalgröße im Format JPEG geladen. Die zweite Tabelle listet alle URLs auf, die im Buch auf den jeweiligen Seiten genannt sind. Für Feedback und Bug-Reports stehen ihnen E-Mail sowie ein eigenes Ticket-System zur Verfügung, in dem Sie neue Kommentare absetzen und bestehende Kommentare / Errata auch Online mitverfolgen können.

SeiteBeispiel / GrafikScreenshot
56Abbildung 3.1: Opera ist bei der Implementierung von neuen Formular-Input-Typen bereits sehr weit.

Erstellt mit Opera 10.60

Screenshot
58Abbildung 3.2: Safari mit dem Input-Typ »range«

Erstellt mit Safari 5

Screenshot
59Abbildung 3.3: Unterstützung neuer Formular-Input-Typen auf einem Android 2.1-Telefon mit den Browsern Webkit (links, Mitte) und Opera (rechts)

Erstellt mit Chrome/Opera Mini 4

Screenshot
60Abbildung 3.4: Die neuen input-Typen auf einem BlackBerry-Smartphone (BlackBerry 9800-Simulator)

Erstellt mit Blackberry (Webkit)

Screenshot
61Abbildung 3.5: Das »placeholder«-Attribut in Google Chrome

Erstellt mit Chrome 6

Screenshot
66Abbildung 3.6: Das »meter«-Element und ähnliche Möglichkeiten zur Darstellung eines Zustandes

Erstellt mit Chrome 6

Screenshot
69Abbildung 3.7: Opera mit der Darstellung eines »datalist«-Elements

Erstellt mit Opera 10.60

Screenshot
71Abbildung 3.8: Eine Kombination aus »input«- und »select«-Elementen als Fallback für ältere Browser (hier Internet Explorer 8)

Erstellt mit IE 9b

Screenshot
73Abbildung 3.9: Auswahl der Schlüssellänge in Google Chrome

Erstellt mit Chrome 6

Screenshot
73Abbildung 3.10: Der öffentliche Schlüssel des »keygen«-Elements, dargestellt in Firebug

Erstellt mit Firefox 4.0b

Screenshot
74Abbildung 3.11: Zwei »output«-Elemente zeigen die Anzahl der Produkte und deren Gesamtpreis an.

Erstellt mit Opera 10.60

Screenshot
77Abbildung 3.12: Die Fehlermeldung bei einem leeren Eingabefeld mit dem Attribut »required« (Opera)

Erstellt mit Opera 10.60

Screenshot
77Abbildung 3.13: Die Fehlermeldung von Opera beim Eingeben einer ungültigen E-Mail-Adresse

Erstellt mit Opera 10.60

Screenshot
80Abbildung 3.14: Opera zeigt die Fehlermeldung für eine inkorrekte Zeiteingabe (in diesem Fall eine Verletzung des »step«-Attributs)

Erstellt mit Opera 10.60

Screenshot
82Abbildung 3.15: Opera zeigt die Fehlermeldung bei einer manuellen Fehlerbehandlung (Überprüfung der E-Mail-Domain)

Erstellt mit Opera 10.60

Screenshot
84Abbildung 3.16: Das fast fertig ausgefüllte Support-Formular

Erstellt mit Chrome 6

Screenshot
SeiteURL
64http://de.wikipedia.org/wiki/Regulärer_Ausdruck
64http://www.regexe.de/
73http://de.wikipedia.org/wiki/Public-Key-Infrastruktur
73http://de.wikipedia.org/wiki/Challenge-Response-Authentifizierung