div#content td, div#content img{display: block;}

Erstellen von HTML5-Anwendungen

Bessere Webformulare mit HTML5-Formularen

Brandon Satrom

Als Webentwickler haben Sie möglicherweise bereits HTML-Formulare erstellt. Genau genommen haben Sie sicherlich so viele HTML-Formulare erstellt, dass Sie sich gar nicht mehr erinnern können. Zweifelsohne sind Sie mit den klassischen Eingabetypen vertraut, wie „text“, „password“, „file“, „hidden“, „checkbox“, „radio“, „submit“ und „button“. Wahrscheinlich haben Sie die meisten oder alle Eingabetypen zu verschiedenen Zeiten verwendet.

Wenn ich Sie fragen würde, welchen Eingabetyp aus der oben genannten Aufzählung Sie am häufigsten verwenden, lautet die Antwort wohl „text“, wie bei den meisten Entwicklern auch. Der text-Eingabetyp ist das Multitool für die klassische Entwicklung von HTML-Formularen. Einerseits kann es an jede beliebige Aufgabe angepasst werden, die Sie ihm geben. Andererseits ist es semantisch neutral, sodass der Browser keine Hilfestellung bietet, dieses Element in ein praktikables Element umzuwandeln. Als Ausgleich dieses Mankos haben Entwickler und Designer (mithilfe von IDs und Klassennamen) diese Elemente mit ihrer eigenen Semantik ergänzt und waren auf Server-Frameworks und JavaScript angewiesen, um Validierungen durchführen und umfassende Interaktionen hinzufügen zu können.

Ein klassisches Beispiel ist das Erfassen von Daten in Textfeldern. Meistens möchten Sie ein Datenfeld mit einer Datumsauswahl erweitern. Dies erfolgt häufig mit einem individuell angepassten JavaScript oder einem Framework wie jQuery UI, das ein Interaktionsverhalten ergibt, mit dem Benutzer ein Datum aus einem Widget auswählen und dieses Datum in das ursprüngliche Feld einfügen lassen können.

Ungeachtet dessen, wie nützlich dieses Muster ist – und wir Entwickler sind sehr geschickt im Umgang mit solchen Mustern – wird es so oft wiederholt, dass Sie sich fragen: „Warum kann der Browser das nicht?“

Die gute Nachricht ist, dass dank der HTML5-Formulare der Browser diese Aufgabe nun übernehmen kann und wird. Neben dem text-Eingabetyp und ein paar wenigen vorhandenen Typen, die uns seit Jahren zur Verfügung stehen, können mit HTML5 13 neue Werte für das Eingabetypattribut sowie zahlreiche andere Attribute hinzugefügt werden, die zur schnelleren Entwicklung Ihrer Formulare beitragen. Diesen Monat informiere ich Sie über einige der neuen Eingabetypen und Attribute von HTML5-Formularen sowie über ihren Implementierungsstatus in verschiedenen Browsern. Als Nächstes gebe ich Ihnen einen kurzen Überblick über die neuen Clientvalidierungsfunktionen für HTML5-Formulare. Zum Schluss erläuterte ich, wie mithilfe der neuesten Updates von Visual Studio 2010 und Microsoft .NET Framework 4 HTML5-Formulare und ASP.NET Web Forms reibungslos zusammen funktionieren. Im gesamten Artikel erfahren Sie, wie Sie HTML5-Formulare in Ihre heutigen Anwendungen integrieren und gleichzeitig Ausweichlösungen für ältere Browser bereitstellen können. Alle Demos für diesen Artikel, die online zur Verfügung stehen, wurden mithilfe von WebMatrix erstellt, einem kostenlosen, kompakten Webentwicklungstool von Microsoft. Sie können WebMatrix unter aka.ms/webm selbst ausprobieren.

Neue Eingabetypen in HTML5

Was wir heute als HTML5-Formulare oder HTML5-Webformulare kennen, begann als Web Forms 2.0, einer Spezifikation vor HTML5, die von der Gruppe „Web Hypertext Applications Technology Working Group“ (WHATWG) ausgearbeitet wurde. Ein Großteil der ersten Arbeit der WHATWG gilt als Ausgangspunkt für HTML5. Die Leistung von Web Forms 2.0 ist nun Teil der offiziellen HTML5-Spezifikation, die Sie unter bit.ly/njrWvZ abrufen können. Ein erheblicher Teil der Spezifikation bezieht sich auf neue Typen und Inhaltsattribute für das Eingabeelement, das Sie unter bit.ly/pEdWFs einsehen können.

Wie ich bereits erwähnt habe, führt die Spezifikation 13 neue Eingabetypen zur Verwendung in Formularen ein: search, tel, url, email, datetime, date, month, week, time, datetime-local, number, range, color.

Die Verwendung dieser neuen Typen ist einfach. Angenommen, ich möchte ein neues E-Mail-Feld in einem Bestellformular einfügen. Wie Sie in Abbildung 1 sehen, habe ich die Bestellseite der WebMatrix-Websitevorlage für Bäckereien mit einigen zusätzlichen Feldern modifiziert, u. a. E-Mail.

Abbildung 1 Beispiel für Bestellformular

Für dieses Formular ist das E-Mail-Feld wie folgt markiert:

<input type="email" id="orderEmail" />

Beachten Sie, dass das Typattribut dem Eingabetyp „email“ anstatt „text“ entspricht. Das Beste an den neuen HTML-Eingabetypen ist, dass Sie sie heute noch einsetzen können und sie auf einer bestimmten Ebene in allen Browsern funktionieren. Wenn ein Browser einen dieser neuen Typen erkennt, geschieht Folgendes:

Wenn der Browser die neuen Eingabetypen nicht unterstützt, wird die Typendeklaration nicht erkannt. In diesem Fall stuft der Browser das Element sinnvoll herab und behandelt es als Eingabetyp „text“. Sie können dies ausprobieren, indem Sie dieses Element in einem Formular einfügen und „document.getElementById(‘orderEmail’).type“ in die F12-Toolskonsole von Internet Explorer 9 eingeben. Also können Sie diese neuen Typen heute noch verwenden. Wenn der Browser ein bestimmtes Feld nicht unterstützt, funktioniert es weiterhin so wie ein normales Textfeld.

Wenn der Browser einen Typ erkennt, profitieren Sie unverzüglich von der Verwendung. Bei erkannten Typen fügt der Browser ein typenspezifisches integriertes Verhalten hinzu. Beim Eingabetyp „email“ validiert Internet Explorer 10 Platform Preview 2 (PP2) und höher jede Eingabe automatisch und zeigt eine Fehlermeldung an, wenn der angegebene Wert keine gültige E-Mail-Adresse ist, wie in Abbildung 2 dargestellt.

Abbildung 2 Automatische Validierung durch den Browser für den Eingabetyp „email“

Der Zweck und das Verhalten des jeweiligen Elements können leicht nach seinem Typ abgeleitet werden, sodass wir ohne weiteres eine andere Ebene von semantischer Vielfältigkeit in unseren Formularen erreichen. Darüber hinaus kann der Browser dank einiger dieser neuen Eingabetypen umfangreichere, fertig vorkonfigurierte Interaktionen bereitstellen. Wenn ich zum Beispiel das folgende Element in einem Formular einfüge und dieses Formular dann in einem Browser öffne, der den Eingabetyp „date“ voll unterstützt, ist die Standardinteraktion viel umfangreicher als ein einfaches herkömmliches Textfeld:

<input type="date" id="deliveryDate" />

In Abbildung 3 ist dargestellt, was der Eingabetyp „date“ in Opera 11.5 leisten kann. Das Beste daran ist, dass ich nur den Typ „date“ angeben musste, um diese Interaktion zu erreichen. Dann hat der Browser sämtliche Arbeit übernommen, die ich bisher manuell in JavaScript erledigen musste, um diese Funktionalitätsstufe zu erlangen.

Abbildung 3 Eingabetyp „date“ in Opera 11.5

Beachten Sie in jedem Fall, dass die HTML5-Spezifikation nicht vorgibt, wie Browser diese neuen Eingabetypen oder Validierungsfehler darstellen sollen, sodass Sie erwartungsgemäß feine bis große Unterschiede zwischen den Browsern feststellen. Zum Beispiel bietet Chrome 13 ein Drehfeld für das Datum anstatt einer Datumsauswahl, wie in Abbildung 4 dargestellt (was sich in der Zwischenzeit, bis Sie diesen Artikel gelesen haben, schon wieder geändert haben kann). Außerdem sollten Sie wissen, dass im World Wide Web Consortium (W3C) das Browserdesign und die Platzierung von Elementen wie „datetime“, „date“ und „color“ fortlaufend diskutiert werden. Derzeit stimmen nicht alle Browser darin überein, wie diese Typen implementiert werden sollen, und es gibt innerhalb vorhandener Implementierungen keine aktuellen Anpassungseigenschaften, die denen ähnlich von jQuery UI sind. Wenn Sie diese neuen Typen implementieren oder ausprobieren möchten, achten Sie stets darauf, eine geeignete Ausweichlösung parat zu haben. Wenn darüber hinaus Ihren Benutzern eine konsistente Präsentation und konsistentes Verhaltens wichtig ist, müssen Sie möglicherweise benutzerdefinierte Stile anwenden, das Standardverhalten dieser Steuerelemente aufheben oder eine skriptbasierte Lösung nutzen.

Abbildung 4 Eingabetyp „date“ in Chrome 13

Wie bereits gesagt, verhalten sich diese Felder weiterhin wie normale Textfelder, was eine nette, sinnvolle Herabstufung ist, die uns der Browser bietet. Ein als einfaches Textfeld implementiertes Datumsfeld ist jedoch umständlich und gilt weitestgehend als wenig benutzerfreundlich. Mithilfe von Modernizr und jQuery UI können Sie jedoch eine Lösung bereitstellen, die die besten Eigenschaften von HTML5-Formularen mit einer passenden Ausweichlösung kombiniert.

Sie erinnern sich an meinen letzten Artikel (msdn.microsoft.com/magazine/hh394148), in dem ich erwähnt habe, dass es sich bei Modernizr (modernizr.com) um eine JavaScript-Bibliothek handelt, mit der Sie erkennen können, ob HTML5-Funktionen im Browser unterstützt werden. Für dieses Beispiel möchte ich mithilfe von Modernizr erkennen, ob der Eingabetyp „date“ in HTML5 unterstützt wird. Wenn er nicht unterstützt wird, verwenden Sie das Kalender-Widget von jQuery UI (jqueryui.com), um ein ähnliches Maß an Benutzerfreundlichkeit zu erreichen. Sobald ich Referenzen für Modernizr, jQuery und jQuery UI heruntergeladen und eingefügt habe, kann ich mit nur einigen wenigen Codezeilen eine Ausweichunterstützung für meine Datumselemente hinzufügen:

if (!Modernizr.inputtypes.date) {
  $("input[type=date]").datepicker();
}

Das in Internet Explorer 10 PP2 angezeigte Ergebnis wird in Abbildung 5 dargestellt.

Abbildung 5 Datumsfeldunterstützung mit jQuery UI

Neue Eingabeinhaltsattribute in HTML5

Neben den neuen Eingabetypen bietet HTML5 einige nützliche neue Inhaltsattribute, die zur Validierungsunterstützung und für eine verbesserte Funktionalität in Eingabefeldern verwendet werden können. Eins dieser neuen Attribute ist „placeholder“, das laut der Spezifikation „…einen kurzen Hinweis (d. h. ein Wort oder einen kurzen Satz) darstellt, der den Benutzer bei der Dateneingabe unterstützen soll“ (deren Schwerpunkt). Zum Beispiel kann ich einige Felder aus unserem Bestellformular nehmen und den Platzhalter „some text“ in jedes Feld einfügen. Das Ergebnis sehen Sie in Abbildung 6:

<input type="email" id="orderEmail" placeholder="ex. name@domain.com" />
<input type="url" id="orderWebsite" placeholder="ex. http://www.domain.com" />

Abbildung 6 Verwenden des Attributs „placeholder“ in Eingabefeldern

Der Text des Platzhalters weist eine hellere Farbe auf als normaler Text. Wenn ich den Schwerpunkt auf jedes Feld lege, verschwindet der Text, sodass ich meinen eigenen Wert eingeben kann.

Wie bei neuen Eingabetypen wird auch das Attribut „placeholder“ nicht in älteren Browsern unterstützt. Es wird nichts Schlimmes passieren, wenn ein Besucher eine Seite mit Platzhaltern öffnet. Also überlegen Sie noch heute, sie einzusetzen, auch wenn Sie nicht vorhaben, eine Unterstützung für ältere Browser hinzuzufügen. Wenn Sie keine Polyfillunterstützung für Platzhalter hinzufügen möchten, kann Modernizr helfen. Wie ich in meinem letzten Artikel erwähnt habe, führen die zuverlässigen Mitarbeiter bei Modernizr eine fortlaufend aktualisierte Liste über jedes einzelne Polyfill oder Fallback, das Sie für eine angegebene HTML5-Funktion nur wünschen können. Sie können diese Liste unter bit.ly/nZW85d aufrufen.

In diesem Beispiel verwenden wir das von Mike Taylor erstellte Attribut „HTML5 placeholder“ von jQuery, das Sie unter bit.ly/pp9V4s herunterladen können. Anschließend fügen Sie Folgendes zu einem Skriptblock hinzu, auf den auf Ihrer Seite verwiesen wird:

Modernizr.load({
    test: Modernizr.input.placeholder,
    nope: "../js/html5placeholder.jquery.min.js",
    callback: function() {
      $('input[placeholder]').placeholder();
    }
  });

Hier testet Modernizr, ob das Attribut „placeholder“ unterstützt wird. Falls nicht, wird „html5placeholder.jquery.min.js“ geladen. Anschließend wählt jQuery jedes Element mit einem placeholder-Attribut aus und fügt eine Unterstützung für Plug-Ins hinzu. Wenn Sie dies in Internet Explorer 9 ausprobieren, werden Sie feststellen, dass das Endergebnis sehr ähnlich wie die systemeigene Browser-Unterstützung von Internet Explorer 10 PP2 aussieht.

Ein weiteres interessantes neues Attribut ist „autofocus“, mit dem Sie, wie der Name verspricht, ein einzelnes Formularfeld angeben können, um beim Laden einer Seite automatisch den Fokus zu erhalten. Es sollte nur ein Feld pro Seite dieses Attribut beinhalten. Wenn mehrere Elemente mit dem Attribut „autofocus“ bezeichnet werden, erhält das erste mit dieser Deklaration den Fokus beim Laden einer Seite. In meinem Bestellformular soll das Namensfeld den Fokus erhalten. Also füge ich das Attribut wie folgt hinzu:

<input type="text" class="field" id="orderName" autofocus />

Das Attribut „autofocus“ kann für ein beliebiges Formularsteuerelement verwendet werden und ist eine hervorragende Alternative für skriptbasierte, auf Formulare ausgerichtete Strategien, mit denen sich viele Webentwickler in der Vergangenheit auseinander setzen mussten.

Validierung von HTML5-Formularen

Eine Erläuterung all der interessanten neuen formularbezogenen Attribute würde den Rahmen dieses Artikels sprengen, dennoch möchte ich gerne kurz über die Attribute „required“, „pattern“, „novalidate“ und „formnovalidate“ sprechen, die die clientseitige Formularvalidierung zu einem Kinderspiel machen.

Bei Browsern, die diese Attribute unterstützen, informiert das Attribut „required“ den Browser darüber, dass dieses Formular nicht ohne einen Wert übermittelt werden kann. Zum Beispiel füge ich das Attribut „required“ in das Namensfeld meines Bestellformulars ein:

<input type="text" class="field" id="orderName" required />

Wenn ich diese Seite in Internet Explorer 10 PP2 öffne und versuche, das Formular zu senden, wird eine Meldung ähnlich wie in Abbildung 7 angezeigt. Mit einem einzelnen Attribut hat der Browser genug Informationen, um das Element mit einem roten Rahmen zu gestalten und eine Meldung anzuzeigen, dass das Feld ein Pflichtfeld ist.

Abbildung 7 Verwenden des Attributs „required“ in einem Formularfeld

In Abbildung 2 ist dargestellt, wie der Browser bestimmte Typen wie „email“ und „url“ ohne zusätzliche Eingabe seitens des Benutzers automatisch validieren kann. Mit dem Attribut „pattern“ können Sie Ihren eigenen Validierungstest für Eingabetypen bereitstellen. Gemäß der HTML5-Spezifikation erwartet das Attribut „pattern“ einen regulären Ausdruck, den der Browser zum Validieren des besitzenden Felds nutzt.

Mein Bestellformular enthält ein Telefonfeld (Eingabetyp „tel“), für das ich folgendes Validierungsmuster angeben kann:

<input type="tel" id="orderTelephone" pattern="\(\d\d\d\) \d\d\d\-\d\d\d\d" title="(xxx) xxx-xxxx" />

Dieser (nicht sehr komplexe) reguläre Ausdruck teilt dem Browser mit, dass eine siebenstellige Zahl mit Klammern um die Vorwahl und ein Bindestrich in der Anschlussnummer zu erwarten ist. Durch die Eingabe eines anderen Formats wird die Meldung wie in Abbildung 8 angezeigt. Beachten Sie, dass die Meldung Anweisungen zur Formatierung der Eingabe enthält: „(xxx) xxx-xxxx“. Dieser Teil der Nachricht stammt vom title-Attribut des gleichen Elements, sodass zumindest ein Teil der Validierungsmeldung über Ihre Markierung gesteuert werden kann. Eins müssen Sie jedoch beachten, wenn Sie das title-Attribut zur Unterstützung der Validierung verwenden. Gemäß der Spezifikation kann der Browser den Titel wahlweise in anderen, nicht fehlerhaften Fällen anzeigen. Daher sollten Sie sich nicht auf dieses Attribut als eine Stelle für falsch erscheinenden Text verlassen.

Abbildung 8 Verwenden des Attributs „pattern“ für einen Validierungsausdruck

Die vom Browser ausgeführte automatische Validierung ist eine tolle Sache, wirft jedoch zwei dringende Fragen auf. Erstens: Was passiert mit den Server- oder Clientvalidierungsskripts, die vom Server-Framework generiert werden (wie beispielsweise ASP.NET MVC)? Und zweitens: Wie verhält es sich bei den Fällen, wenn der Benutzer das Formular als in Bearbeitung befindlich ohne Validierung speichern können soll? Die Antwort der ersten Frage geht über den Rahmen dieses Artikels hinaus. Allerdings habe ich einen Blogbeitrag zu genau diesem Thema in ASP.NET MVC geschrieben, den Sie unter bit.ly/HTML5FormsAndMVC einsehen können.

Die zweite Frage lässt sich jedoch einfach beantworten. Angenommen, Sie haben ein Formular, mit dem sich die Benutzer vor der Übermittlung eine zeitlang beschäftigen und vielleicht sogar mehrmals speichern, bevor sie es schließlich an Ihren Server senden. Für diese Fälle, wenn ein Benutzer ein Formular ohne Validierung übermitteln können soll, stehen Ihnen zwei Attribute zur Verfügung: „formnovalidate“, das in Eingabefelder des Typs „submit“ eingefügt wird, und „novalidate“, das in einen Anfangstag des Formulars eingefügt wird. In diesem Beispiel füge ich zwei submit-Felder wie folgt in mein Formular ein:

<input type="submit" value="Place Order" />
<input type="submit" formnovalidate value="Save for Later" id="saveForLater" />

Durch das Attribut „formnovalidate“ auf der zweiten Schaltfläche wird die Validierung deaktiviert und das Formular übermittelt, sodass die laufende Arbeit der Benutzer in meiner Datenbank oder sogar clientseitig mithilfe einer neuen HTML5-Speichertechnologie wie localStorage oder IndexedDB gespeichert werden kann.

HTML5-Formulare und ASP.NET Web Forms

Bevor ich zum Ende dieses Artikels komme, möchte ich Ihnen zusätzliche Informationen zu HTML5-Formularen für Entwickler von ASP.NET Web Forms mitteilen. Wenn Sie beabsichtigen, die Entwicklung von HTML5-Formularen mithilfe von ASP.NET Web Forms durchzuführen, gibt es erfreuliche Nachrichten: Viele HTML5-bedingte Updates für .NET und Visual Studio werden unabhängig veröffentlicht, sodass Sie nicht auf die nächste Frameworkversion warten müssen, um diese Features heute nutzen zu können.

Für Ihren Einstieg in HTML5-Formulare und ASP.NET Web Forms benötigen Sie mehrere Updates. Stellen Sie zuerst sicher, dass Sie über Visual Studio 2010 SP1 (bit.ly/nQzsld) verfügen. Die Service Packs ermöglichen nicht nur das Hinzufügen von Unterstützung für die neuen HTML5-Eingabetypen und -Attribute, sondern bieten auch einige Updates, mit denen Sie die neuen HTML5-Eingabetypen für das TextBox-Serversteuerelement verwenden können. Ohne dieses Update würden Kompilierzeitfehler beim Verwenden dieser neuen Typen auftreten.

Sie müssen auch das Microsoft .NET Framework 4 Reliability Update 1 (bit.ly/qOG7Ni) herunterladen. Dieses Update dient dazu, eine Reihe von Problemen hinsichtlich der Verwendung der neuen HTML5-Eingabetypen mit ASP.NET Web Forms zu beheben. Scott Hunter erläutert einige dieser Updates – UpdatePanel, Validierungssteuerelemente und Rückrufe – in einem Blogbeitrag von Anfang August, den Sie unter bit.ly/qE7jLz aufrufen können.

Die Ergänzung der Web Forms-Unterstützung in Browsern mit HTML5 ist eine gute Nachricht für Webentwickler überall. Uns steht nicht nur ein Satz von semantischen Eingabetypen zur Nutzung in unseren Anwendungen zur Verfügung, sondern wir können diese Eingabetypen heute auch ohne weitere Auswirkungen in älteren Browsern verwenden. Gleichzeitig erreichen wir eine bessere Funktionalität in neuern Browsern, einschließlich automatischer Clientvalidierung. Der unverzügliche Einsatz dieser neuen Felder bietet unmittelbare Vorteile für mobile Anwendungen, bei denen durch Eingabetypen wie „url“ and „email“ mobile Geräte angewiesen werden, Benutzern für diesen Eingabetyp angepasste Bildschirmtastaturoptionen bereitzustellen. Wenn Sie diese neuen Features mit Modernizr und einer der großartigen Polyfilloptionen kombinieren, besitzen Sie alle erforderlichen Tools, um HTML5-Formulare jetzt in Ihren Anwendungen zu übernehmen.

Wenn Sie weitere Informationen zur Unterstützung von HTML5-Formularen in Internet Explorer 10 PP2 erhalten möchten, rufen Sie „ietestdrive.com“ auf und sehen Sie sich das Entwicklerhandbuch im Internet Explorer Developer Center (bit.ly/r5xKhN) an. Für eingehendere Informationen zu HTML5-Formularen im Allgemeinen empfehle ich das Kapitel „A Form of Madness“ aus dem Buch vom Mark Pilgrim „HTML5: Up and Running“ (O’Reilly Media, 2010) sowie den Abschnitt zu Formularen in der W3C HTML5-Spezifikation (bit.ly/nIKxfE).

Brandon Satrom* arbeitet als Developer Evangelist für Microsoft in der Nähe von Austin, Texas.*

Unser Dank gilt den folgenden technischen Experten für die Durchsicht dieses Artikels: Jon Box, John Hrvatin, Scott Hunter und Clark Sell.