Video-Tutorial: Bestehendes Kontaktformular mit HTML5 aufpeppen

Langsam werde ich mit der Screencasting-Software etwas warm und das Aufnehmen von Video-Tutorials bereit mir echt Vergnügen. Deshalb habe ich mich heute wieder einem spannenden Thema angenommen, und zwar den HTML5 Formularen.

Vor einigen Wochen gab es mal ein Artikel : HTML5 Formulare – neue Input-Types, Attribute und mehr. Für das heutige Video wollte ich die Sache etwas praktischer angehen und habe mir einen Baustein geschnappt, der auf fast keiner Webseite fehlt; das Kontaktformular.

Aus Alt mach Neu – vollkommen abwärtskompatibel

Eine schöne Sache an HTML5 Formularen ist das Prinzip der Graceful Degradation. Dieses ermöglicht uns Webentwicklern bereits heute, ein breites Spektrum der uns zur Verfügung stehenden neuen Attribute oder Input-Types ohne schlechtes Gewissen einzusetzen. Verwendet man zum Beispiel das Email-Eingabefeld, so wird es in alten Internet-Explorer-Krücken einfach als normales Textfeld ausgegeben. Moderne Browser hingegen verstehen das Attribut richtig und erwarten die Eingabe einer Emailadresse.

Einen Zustand, den wir uns auch für bestehende Formulare zu Nutzen machen können. Innerhalb weniger Minuten ist ein altes Kontaktformular in ein modernes HTML5-Formular verwandelt. Der Nutzer alter Browser wird davon nichts mehr; es entstehen weder Fehler noch Mehrwert für ihn. Alle anderen profitieren hingegen von einem großen Plus an Benutzerfreundlichkeit. Und das beste: Wir Webentwickler sparen uns eine Menge Zeit!

Aber nun zum Video:

Wir immer empfehle ich euch natürlich direkt die 1080p-Variante im Fullscreen zu betrachten.

Der Quellcode

Altes Kontaktformular ohne HTML5-Elemente.

Neues Kontaktformular mit HTML5-Elementen.