Web

Formulare

HTML5 - was es kann (Teil 4)

06.04.2011
Von 


Simon Hülsbömer betreut als Senior Research Manager Studienprojekte in der Marktforschung von CIO, CSO und COMPUTERWOCHE. Zuvor entwickelte er Executive-Weiterbildungen und war rund zehn Jahre lang als (leitender) Redakteur tätig. Hier zeichnete er u.a. für die Themen IT-Sicherheit und Datenschutz verantwortlich.

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…