Im ersten Teil der HTML5-Serie konnten Sie alles über neue Präsentationsformen im multimedialen Bereich lesen. Im zweiten Teil beschäftigten wir uns mit den neuen Möglichkeiten zur Datenaufbereitung sowie zur Verknüpfung von Online-Diensten und lokalen Anwendungen. Im dritten Teil ging es weiterführend um neue Methoden der Datenübertragung. Der vierte Teil handelt neue Formularfunktionen und Bibliotheksabfragen, die künftig direkt im Browser stattfinden können, ab.
Die Veränderungen, die in der neuen HTML-Spezifikation am <form>-Element vorgenommen worden sind, gehen weiter als die vieler anderer Tags. In Zukunft bieten Formulare von Haus aus Optionen, für die vormals Add-on-Bibliotheken und zahlreiche Konfigurationseinstellungen nötig gewesen sind. Nachinstallierbare Überprüfungsmechanismen gewährleisteten früher, dass Formulardaten im richtigen Format abgelegt wurden - das kann der Browser künftig allein.
HTML5 bietet neue (AJAX-basierende) Input-Felder, die die richtige Datenmenge schon während der Eingabe automatisch prüfen können. Beispiele sind genaue (zeitbezogene) Angaben, die einer vorgegebenen Auswahlmenge entstammen - wie Monate, Wochen, Minuten - oder gültige URLs/E-Mail-Adressen, die einem immer gleichen Muster folgen.
Die HTML5-Features werden nach und nach in den Browsern umgesetzt. So können für Google Chrome bereits erlaubtes Minimum und Maximum von absoluten Werten in Eingabefeldern festgelegt werden, eine selbsttätige Prüfung findet indes nicht statt. Auch Firefox, Safari, Opera und der Internet Explorer unterstützen schon viele der neuen Formularfunktionen - jedoch nicht alle in der gleichen Art und Weise. Entwickler, die sie verwenden möchten, tun sich also weiterhin schwer, universelle Funktionen einzubringen. Testen Sie Ihren Browser hier! Wenn nur leere Felder auftauchen, unterstützt er die Funktionen nicht; gibt es hingegen Auswahlmenüs, sind sie auf der sicheren Seite (vergleiche Screenshots).
Input-Element
Bislang gab es drei Formen nativer HTML-Input-Elemente: Radio Buttons (Einfachauswahl), Checkboxen (Mehrfachauswahl) und Freitextflächen. Jede Art von Werteprüfung musste mühsam per JavaScript nachgepflegt werden. Dazu standen zwar eine Menge Bibliotheken bereit, die Umsetzung blieb jedoch jedem Entwickler selbst überlassen.
In der neuen Spezifikation macht der Browser nun einen Unterschied zwischen den verschiedenen Eingabetypen - Daten, E-Mail-Adressen, Zahlen und Web-Adressen erkennt er einzeln und bietet der Auswahl entsprechende Optionen an. Ein Datum lässt sich beispielsweise unterschiedlich auswählen: volles Datum, nur Jahr und Woche, nur Jahr und Monat oder auch nur die Uhrzeit. Kombinationen aus Uhrzeit und Datum sind ebenfalls möglich - mit und ohne Angabe einer Zeitzone.
Durch die erlaubte Vielfalt ergeben sich aber auch Probleme. Welcher Entwickler wird schon gerne den Code schreiben, der alle erlaubten Typen von Telefonnummern auf der Welt nachprüft? Mit und ohne Punkten zwischen Zahlenpaaren, mit und ohne Klammern bei Orts- und Netz-Vorwahlen, von den möglichen Sonderzeichen (+) bei Ländervorwahlen ganz zu schweigen. Einfache Standards helfen hier nicht ab, weil zuvor die Telefonnummern selbst anders aufgebaut werden müssten. Die einzig praktikable Lösung wäre, die automatische Validierung bei derartigen Eingabeelementen komplett auszusetzen. Oder eben wieder ein Freitext mit Eingabesperre für alle Nicht-Nummern, wie es heute auch schon gang und gäbe ist.
Mit Attributen werden die Formularelemente noch vielseitiger. Lassen Sie Ihren Browser für sich arbeiten - wie das geht, verraten wir auf der folgenden Seite.
Input-Element: Attribute
Den Typ des Eingabefeldes auszusuchen ist nur der Anfang. Der Spaß beginnt dann, wenn es um die Attribute geht, die jedem einzelnen Element zugewiesen werden können. So lassen sich Vorgaben über Minima und Maxima nur bei Auswahlen in absoluten Wertebereichen wie Zeiten und Zahlen einbringen und nicht bei anderen Angaben wie E-Mail-Adressen - auch wenn diese aus rein technischer Sicht durchaus (alphabetisch) sortierbar wären.
Grob überschlagen entdeckt man mindestens 14 verschiedene Elementtypen, die zusammengenommen 37 Attribute unterstützen. Die aktuelle Version der HTML5-Spezifikation enthält eine Tabelle, die alle zulässigen Attribute ausweist.
Client-seitige Formular-Validierung
Weil der Validierungsvorgang transparent abläuft, sind Typen und Attribute erst der Anfang. Auf Wunsch übernimmt das Formular die meiste Arbeit, der Entwickler kann jedoch auch in den automatischen Prozess eingreifen oder ihn komplett ersetzen.
Sobald eine Eingabe inkorrekt erscheint, setzt die Formularprüfung von sich aus eine durchsuchbare Datenstruktur auf. Die Methode validity.patternMismatch gibt daraufhin den Wert "true" aus, wenn die Struktur angelegt ist, die überprüften Daten aber nicht hineinpassen. Entwickler, denen das nicht genügt, können diese "true"-Meldung mit Hilfe von oninput- oder onchange-Routinen durch eigene Fehlermeldungen ersetzen - beispielsweise um anzuzeigen, warum die geprüften Eingaben nicht stimmen können. Auch lassen sich Folgeereignisse, die per Spezifikation bei problematischen Eingaben automatisch angetriggert werden, abschalten. Wer komplett auf eine Validierung verzichten will, setzt die checkValidity-Methode gar nicht erst ein.
Jedes Formularfeld lässt sich auf drei oder vier verschiedene Arten prüfen - HTML5 gestaltet es dabei flexibel und verständlich für alle Anwender, die sich mit Funktionen, die von bestimmten Ereignissen abhängig sind, auskennen.
Ein Sicherheitshinweis noch: Weil lokalen Clients und Browsern im Offline-Modus auch wegen deren größerer Angriffsfläche für bösartige Attacken seitens der Anwender nicht vertraut werden kann, sollten alle Validierungsvorgänge unbedingt auch noch einmal auf dem Live-Server getestet werden - zumindest aber die, die wichtige und sensible Eingaben betreffen.
Anpassbare Optionen
Daten lediglich als "akzeptabel" oder "nicht akzeptabel" zu validieren, ist aber nicht alles. Mit HTML5 bieten sich dem Seitenbesucher neue Hilfs- und Vorschlagsattribute. Eine der einfachsten ist die Rechtschreibprüfung (spellcheck='true') für alle editierbaren Input-Elemente. Zumeist betrifft es die Freitexte innerhalb eines Formulars und alle mit contenteditable='true' markierte Bereiche auf der Website (das contenteditable-Element kommt später im Text noch einmal zur Sprache).
Ein weiteres Attribut ist datalist. Damit kann einem Form-Element eine Ausdrucksliste hinzugefügt werden - vergleichbar der Option-Tags in Select-Elementen:
<select> <option value="volvo">Volvo</option> <option value="saab">Saab</option> <option value="mercedes">Mercedes</option> <option value="audi">Audi</option> </select>
Bislang unterstützt nur Opera das Feature. Es bleibt auch die Frage, ob es überall sinnvoll ist, dem Anwender alle möglichen Antworten vorzugeben (von Elementen wie Daten, Geburtstagen usw. abgesehen) - schließlich kann es schnell zu Verwirrung führen.
Die Auswahllisten lassen sich auch in eigenständige XML-Dateien auslagern, die von den HTML-Formularen unabhängig ist. Damit lassen sich die Quellcodes ausdünnen und die Listen auf mehreren Seiten verwenden. Diese Möglichkeit ist zwar gegeben, aber noch nirgendwo dezidiert beschrieben worden.
Formulareingaben verschlüsseln und Seitenelemente im Browser frei per Drag and Drop verschieben? Alles dazu auf der folgenden Seite…
Authentifizierung
Mit Hilfe von Formularen lassen sich nun auch Authentifizierungs- und Zertifizierungsvorgänge anstoßen - auch wenn es dazu noch immer keine genaue Spezifikation gibt. Das keygen-Element erstellt verschlüsselte Formulareingaben, wird aber - obwohl seit Netscape-Zeiten bekannt - bislang nur in Teilen von Chrome, Firefox und Opera unterstützt.
Die Idee dahinter besteht darin, dass der Browser automatisch Paare aus öffentlichen und privaten Schlüsseln erzeugt. Kryptographie-Experten sind sich darüber einig, dass der Einsatz von <keygen> jedoch zuviel technisches Fachwissen voraussetzt, beispielsweise über die Schlüssellänge. Darüber hinaus besteht Unklarheit über die Kompatibilität von Zertifikaten über verschiedene Rechner hinweg und über die Sicherheit vor Malware-Angriffen.
Sollte ein Weg gefunden werden, wie sich alle Formulareingaben automatisch mit einem Schlüsselpaar signieren lassen und sich dieser Vorgang nicht nur auf die Keygen-Elemente beziehen, wird sich diese Art der Online-Datenübermittlung durchsetzen. Erste Voraussetzung ist aber ein Standard für alle Formularformen.
Drag and Drop
Die Möglichkeit, eine Seite so zu programmieren, dass Anwender HTML-Elemente per Drag and drop beliebig hin- und herschieben können, gibt es schon über zehn Jahre. Seitdem Microsoft diese Funktion 1999 im Rahmen der Unterstützung des DHTML-Standards in den Internet Explorer eingebaut hat, sorgte sie jedoch für Probleme, weil sie eben nicht von allen Browsern gleich ausgelesen werden konnte. Ihr Durchbruch scheiterte auch an den Anwendern, die sie entweder nicht kannten oder nicht nutzen wollten - bis heute fristet das client-seitige individuelle Gestalten von Websites ein Nischendasein.
Die Drag-and-Drop-Spezifikation in HTML5 wischt zumindest die Probleme, die durch verschiedene Browser verursacht werden, beiseite - wenn man einmal vom Apple Safari absieht, der eine zusätzliche Codezeile in einer CSS-Datei benötigt. In allen übrigen Browsern genügt das Attribut draggable="true" beim jeweils verschiebbaren Seitenelement. Damit ist es - zumindest in der Theorie - frei beweglich. In der Praxis gibt es natürlich noch Details zu regeln - wie sich das Element beispielsweise während des Verschiebevorgangs verhält, wie es sich am Zielort verhält und so weiter. Über diese komplexen Einzelheiten zerbrechen sich die Experten seit längerem den Kopf.
Berechnungsergebnisse in Echtzeit darstellen und ganze Seitenbereiche direkt im Browser bearbeiten: Ist das Formular überhaupt noch zeitgemäß? Diese Themen behandelt die folgende, letzte Seite des Artikels.
Selbstrechnende Formularfelder
JavaScript nimmt routinemäßige Berechnungen vor, nachdem der Anwender Daten in Formularfelder eingegeben hat. Sobald sich die Eingaben in einem Input-Element ändern, ändern sich dadurch auch die anderen Felder - ein Beispiel sind Bereiche mit mehreren Radio Buttons. Eine neue Idee ist ein erweitertes Output-Element, das mit dem Input-Element zusammenarbeitet. Über ein Attribut des Input-Elements wird das Output-Feld bestückt. Jede Änderung bei der Eingabe wirkt sich auch hier sofort auf die Ausgabe aus - dies liegt jedoch nun im Unterschied zu früher in der alleinigen Verantwortung des Browsers. Möglichkeiten für die neuen Output-Elemente sind die <progress>- und <meter>-Tags. Sie geben bestimmte Daten grafisch aus - progress eher unpräzise, meter genauer. Bei letzterem lässt sich über Minimum und Maximum ein Messraum definieren, der dann Anfang und Ende einer Skala markiert.
Formulare und editierbare Inhalte
Trotz der neuen Möglichkeiten innerhalb von HTML5-Formularen stellt sich die Frage, ob das <form>-Element selbst überhaupt noch zeitgemäß ist. Die innovativste Änderung in diesem Kontext besteht nämlich darin, dass es quasi überflüssig wird. Mit dem Attribut contenteditable="true" innerhalb der althergebrachten <div>- und <span>-Tags oder auch in neuen Absatzformaten wie <section> macht der Web-Entwickler fast alle HTML-Elemente editierbar. Jeder Blog-Eintrag, jede Tabelle, jede Liste mit Informationen kann nachträglich bearbeitet, sprich "wikifiziert" werden.
Editierbare Inhalte - richtig eingesetzt- machen das Web ohne Zweifel noch interaktiver und lösen Formulare, die auch nach der HTML5-Spezifikation immer noch ein ziemlich starres Korsett vorgeben - womöglich komplett ab.
Der Artikel stammt von Peter Wayner von unserer US-Schwesterpublikation InfoWorld. Die HTML5-Reihe wird fortgesetzt. (sh)