HTML5 bringt einige Änderungen mit sich. Für diesen Blogpost haben wir uns mit Neuerungen im Bereich der Webformulare beschäftigt.

Ob HTML5 nun kommt, oder nicht, oder ein bisschen haben wir vor einiger Zeit schon diskutiert. Mehr und mehr trifft man auf «grosse» Websites, die vollständig auf HTML5 setzen – etwa die neue Website der NZZ. Der neue Standard verbreitet, die definitive Empfehlung der W3C wird für 2014 erwartet. Für diesen Artikel habe ich mir einige Neuerungen vorgenommen, die Formulare betreffen. Wie schon vor einigen Monaten erwähnt: Viele der HTML5-Innovationen funktionieren nicht in allen Browsern; die nachfolgenden Formular-Features etwa laufen im Internet Explorer nicht.

Neu ist es möglich, einen Platzhalter in input-Feldern zu definieren. Der Platzhalter verschwindet, sobald der User den Cursor in das Feld setzt – vorbei sind die Zeiten, in denen das mit JavaScript umgesetzt werden musste.

Eine kleine, aber sehr nützliche Ergänzung betrifft die Required (zwingend auszufüllendes Feld)-Funktion. Neu kann der Parameter required mitgegeben werden. Wie man in dieser Demo von Richard Shepherd sehen kann, wird das Formular nicht an den Server gesendet, wenn ein obligatorisches Feld nicht ausgefüllt wird. Drei weitere Erweiterungen kann man in dieser Demo ebenfalls sehen – zum Beispiel den integrierten Kalender. Im Code sieht das so aus (dazu wird einfach der Typ auf date geändert):

Um Werte in Feldern zu ändern, wird eine abgewandelte Form des select Elementes genutzt. Anstelle eines select wird ein datalist verwendet. Drückt man auf der Tastatur den Pfeil nach unten, erscheint eine Liste mit den Vorschlägen. Der Code dazu:

Der Nachteil hat dieses Darstellung: Ich dachte zuerst, es sei ein normales input Feld – vermutlich würde das einigen anderen Usern auch so gehen. Die dritte Änderung in der Demo betrifft das Zahlenfeld. Dazu gibt man als Typ «number» an und ergänzt mit «min» und «max» die Zahlenbegrenzung.

Links: Tastatur mit “email” Typ. Rechts: Tastatur mit “url” Typ.

Eine der nützlichsten betrifft die Input-Felder email, url und phone. Die Anpassung dieser Parameter ist vor allem für die User auf mobilen Endgeräten frappant. Denn je nachdem, in welches Input-Feld man klickt, ändert sich die Tastatur des Smartphone-Nutzers.
Update 20.09.2012: eine gute Parameter Übersicht für Webformulare erhält man übrigens bei HTML5Rocks.

Im Grundsatz: Einfacher

Die Veränderungen von HTML 4.01 zu HTML5 sind weitgehend und zielen vor allem auf Einfachheit. Als kleine Veranschaulichung die bisherigen Doctypes und der Neue:

HTML 4.01
< !DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">


XHTML 1.0
< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict //EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">


HTML5
< !DOCTYPE html>


Auch heisst es, mit dem neuen Standard von einigen HTML-Elementen Abschied zu nehmen. frame, frameset und noframes gehören in Zukunft nicht mehr dazu. Ausserdem trifft es das acronym Element. Das kann aber ohne weiteres mit abbr ersetzt werden. Das Zeitliche gesegnet hat auch die font, big, center und strike Elemente. Es wird empfohlen, in Zukunft die Ansicht für Datentabellen nur mit CSS zu lösen, denn auch bgcolor, cellspacing, cellpadding und valign werden von künftigen Browsern nicht mehr unterstützt. Eine spannende Ergänzung betrifft den Link, der heute in der Regel so aussieht:

In Zukunft kann er (muss aber nicht) so aussehen:

Mit andern Worten: Links können in HTML5 über mehrere Elemente definiert werden. Dies war vorher nicht zulässig.

Wer noch mehr über HTML5 (oder fortschrittliche Web-Techniken) erfahren will, dem kann ich die Bücher von A Book Apart sehr empfehlen.