Webseiten-Formulare leichter ausfüllen

Wer kennt das nicht .. man surft durchs Netz und möchte möglichst schnell und zügig Formulare, die einzelne Webseiten z.B. zur Kontaktaufnahme bereitstellen, ausfüllen. Wenn man einige Dutzend Formulare mit den selben Daten ausgefüllt hat, nur um mit einzelnen Unternehmen darüber Kontakt aufzunehmen, erschlaffen langsam die Arme. Zum Glück bieten moderne Browser die Möglichkeit Webseiten-Formulare automatisch auszufüllen. Doch wie steuert man in welches Feld welche Daten kommen?

Die Sicht des Anwenders

Otto-Normal-Webseiten-Besucher kennt meist nur einen Browser: "seinen". Welcher das ist, weiß manch einer nicht mal wirklich. Dennoch fragt "das Ding" beim Ausfüllen von Formularen immer mal wieder, ob man die eingetragenen Formulardaten speichern möchte. Wenn er dann ein weiteres Formular aufruft, kann er auf eben diese gespeicherten Daten zurückgreifen.

Heutige Browser erkennen anhand von bestimmten Kennzeichen (siehe unten), welche Daten das Feld anfordert. Ist das Feld z.B. mit "Vorname" beschriftet und trägt hier den eigenen Vornamen, z.B. "Klaus" ein, merkt sich der Browser das. Ruft der Browser ein weiteres Formular auf in dem auch "Vorname" angefordert wird, erkennt der Browser das und bietet dem Anwender die Möglichkeit den vorher schonmal eingetragenen Vornamen auszuwählen. Das geschieht in den meisten Browsern erst wenn der Anwender den Cursor in das Feld setzt oder das Feld auswählt.

Grenzen sind dabei z.B. durch Checkboxen und Radiobuttons gesetzt. Bei denen kann ein Browser die Werte nicht speichern und wieder auswerten. Hier ist der Anwender aufgeschmissen und muss quasi selbst ohne Hilfe des Browsers die Auswahlen treffen.

Die Sicht des Webseitenbetreibers

Als Webseitenbetreiber kann man bestrebt sein den Besuchern das Ausfüllen von Formularen zu erleichtern. Hier und da ein passendes Keyword in den Quellcode gesetzt - und schon funktioniert es. Damit erleichert man allerdings auch gleichzeitig potentiellen Angreifern das automatische Ausfüllen der Formulare - und geht das Risiko ein, Spam oder unerwünschte Kettenbriefe über ein Kontaktformular zu erhalten.

In diesem Widerspruch muss jeder Webseitenbetreiber selbst entscheiden was er möchte. Eine optimale Lösung für alle gibt es nicht. Webseitenbetreiber von kleinen Webseiten die nur ein Unternehmen repräsentieren und ein einzelnes Kontaktformular aufweisen, sollten sich darüber jedoch keinen Gedanken machen. Das Problem dieser Entscheidungsfindung betrifft eher Webseiten mit generischen Formularen und/oder tausenden Nutzern (Communities).

Die Technik

Wie erkennt ein Browser nun, welche Inhalte in welchem Feld stehen sollen? Ein simples HTML-Formularfeld sieht z.B. so aus:

Der Browser erkennt anhand des name-Attributs, dass hier wohl "Vornamen" gespeichert werden sollen. Nicht jeder Browser beherrscht aber auch die deutsche oder andere Sprachen. Daher merkt der Browser sich einfach nur das Kürzel "vorname" ohne zu interpretieren was das nun ist (könnte ja auch der Nachname oder eine Telefonnummer sein).

Der Anwender gibt in dieses Feld seinen Vornamen ein. Der Browser merkt sich das sobald das Formular abgeschickt wird.

Ruft der Anwender nun wieder ein Formular auf in dem ein Formularfeld mit dem name-Wert "vorname" ist, erkennt der Browser "aha, das hatte ich ja schon" und fügt, wenn der Nutzer es auswählt, den vorher eingegebenen Wert in das Feld ein.

Eingaben steuern

Der Webseitenbetreiber kann solche Eingaben auch steuern. Wie man in dem vorherigen Abschnitt dieses Fachbeitrags gesehen hat, hängt es alles nur mit dem HTML-Code zusammen. Wenn man als Webseitenbetreiber das Ausfüllen erleichtern möchte, dann braucht man somit nur solche einfachen Begriffe als name-Werte verwenden wie sie auch auf anderen Seiten zu finden sind. Z.B.

vorname
nachname
telefon
telefax
handy
mobil
mitteilung

Unterstützt werden vom Browser quasi alle Formularfeldtypen, also nicht nur das o.g. input-text sondern z.B. auch das textarea- und select-Element.

Das Formularfeld input-password stellt jedoch eine Besonderheit dar. Wenn ein solches Formularfeld in einem Formular enthalten ist, speichert der Browser das eingegebene (und visuell nicht sichtbare) Passwort im im Browser integrierten Passwort-Manager.

Auch das Feld input-hidden ist eine Besonderheit. Da es für den Anwender nicht sichtbar ist, wird es für das automatische Ausfüllen auch völlig ignoriert.

Eingaben verhindern

Alle aktuellen Browser unterstützen auch eine Methode um das automatische Ausfüllen zu verhindern. Dafür kann man das Attribut "autocomplete" mit dem Wert "off" verwenden. Beispiel:

Dadurch wird verhindert, dass der Browser den Wert in diesem Feld speichert.

Das Selbe geht auch für das gesamte Formular, nicht nur für ein einzelnes Feld. Beispiel:

Aber Vorsicht: Das autocomplete-Attribut gehört nicht zum HTML4- und nicht zum XHTML-Standard. Wenn man seine Webseite auf Basis dieser Standards aufbaut, erzeugt man bei Verwendung dieses Attributes nicht validen HTML-Code. Bei HTML5 ist dieses Attribut dagegen zulässig und soll auch aktiv zur Steuerung verwendet werden.

Wenn man das autocomplete-Attribut nicht verwenden möchte, kann man sich auch eines Tricks behelfen. Die Formularfelder sollten dann Werte bekommen die einfach irgendeine Buchstaben-Zahlen-Kombination aufweisen. Die Werte dieser Felder werden zwar auch im Browser des Besuchers gespeichert, aber der Browser kann sie nicht automatisch ausfüllen da die name-Werte ihm nicht bekannt sind. Beispiel:

Tipps für Webentwickler

Als Webentwickler muss man regelmäßig selbst erstellte Formulare testen. Nichts ist dabei zeitraubender als ewig lange Formulare mit vielen Feldern die man einzeln ausfüllen muss.

Genau hierfür wurde z.B. das Firefox-Addon Autofill Forms entwickelt. Hiermit kann man per Klick ein Formular komplett ausfüllen. Auch hierbei gilt jedoch: das Programm kann nur mit bestimmten Formularfeldnamen arbeiten, braucht diese als Grundlage um Inhalte in die Felder einzutragen.