Formulare: Wenn das automatische Ausfüllen stört

1 Kommentare
Mischa Sameli, Geschäftsführer & Leiter Entwicklung

Die automatische Vervollständigung bei Formularfeldern ist an sich eine gute da Zeit sparende Sache. Doch manchmal kommt das Browser-Feature recht ungelegen – beispielsweise bei einer Suche, die Resultate noch während der Eingabe liefert, wie dies bei dieser Seite der Fall ist. Wie lassen sich die Vorschläge des Browsers verhindern und wann ist der Einsatz sinnvoll?

Beim Redesign unserer eigenen Website wurde der Suche ein grosser Stellenwert beigemessen. Nicht nur optisch sollte der Suchbereich ein Hingucker werden, auch funktionell und inhaltlich musste Seitensuche überzeugen. Bereits während der Eingabe des Suchbegriffs sollte passende Resultate angezeigt. Sprich sobald drei Zeichen getippt worden sind, startet die Livesuche und zeigt die relevantesten Treffer an. Der Teufel steckt bekanntlich im Detail – in diesem Fall beim Autocomplete-Feature der Browser. Aber beginnnen wir von vorne: bei der Vorgabe des Designs. Wir suchen eigentlich den Begriff Webdesign und starten mit 'web'. Dabei erhalten wir bereits erste Treffer:

Gestaltungsvorgabe für Livesuche

Die Umsetzung ist keine grosse Hexerei: Man überwache das Eingabefeld, sende ab einer gewissen Anzahl Zeichen – in unserem Beispiel deren 3 – einen Ajax-Call an die Suchmaschine und blende die besten Treffer zum Stichwort ein. Blöd nur, dass die Autovervollständigungsfunktion des Browsers selber ins Geschehen eingreift:

Das Autocomplete-Feature des Browsers überlagert die Ausgabe der Livesuche.

Wie lassen sich nun die Vorschläge des Browser ausblenden? Des Rätsels Lösung heisst "autocomplete" und ist ein HTML-Attribut, das mit den Werten 'on' (Standard) und 'off' bestückt werden kann. Anwenden kann man das autocomplete-Attribut auf einzelne input-Tags oder ein komplette Formular über den form-Tag:

1<form autocomplete="off" name="search" id="search" action="/search" method="post">
2<input type="text" id="searchfield" name="suchbegriff" />
3</form>
4oder
5<form name="search" id="search" action="/search" method="post">
6<input type="text" id="searchfield" name="suchbegriff" autocomplete="off" />
7</form>

Die feste Verankerung im Quellcode für die intelligente Suche ist aber nur die zweitbeste Lösung fürs Abschalten von autocomplete. Denn bei deaktiviertem JavaScript wird weder die elegant gestaltete Resultatevorschau noch die Wortvervollständigung des Browsers angezeigt. Und gerade die Vorschläge könnten hilfreich sein. Und so setzen wir das Attribut autocomplete=off mit JavaScript. Denn nur mit aktiviertem JavaScript können wir die Treffervorschau überhaupt einblenden. Onubtrusive JavaScript nennt sich dies und sieht in unserem Fall mit Hilfe des JavaScript-Frameworks jQuery dann so aus:

1$(document).ready(function() {
2 $("#searchfield").attr('autocomplete','off');
3    });

Problem gelöst, alles wunderbar. Doch so ganz unproblematisch ist die Bevormundung des Benutzers auch wieder nicht. Der Einsatz dieser Funktion sollte also mit Bedacht gewählt werden.

Sinnvoller Einsatz

Als sinnvoll erachte ich natürlich den Einsatz im beschriebenen Beispiel. Es kann ein Mehrwert geboten werden, der die Abkürzung in Form weniger Schreibarbeit aufwiegt. Ein ganz anderes Einsatzgebiet eröffnet sich, wenn man Sicherheitsaspekte ins Feld führt. Wenn also heikle Daten eingeben werden müssen und man davon ausgehen kann, dass das Formular an öffentlichen Eingabegeräten bedient werden kann, sprich wenn mehrere Benutzer das gleiche Eingabegerät benutzen. Ein klassisches Beispiel dafür sind auch Zahlungsinformationen. Wo in irgendwelcher Form heikle Daten erfasst werden, empfehle ich den konsequenten Einsatz von autocomplete='off'. Und zwar in der hardcodierten Variante als fix gesetztes HTML-Attribut.

fragwürdiger Einsatz

Da es sich beim Autocomplete-Feature ja im Grundsatz um eine Eingabeerleichterung handelt, die über die Programmeinstellungen des Browser gesteuert werden kann, erachte ich es nicht als sinnvoll, den Willen des Benutzers zu ignorieren. Es sei denn, man könne ihn und seine Privatsphäre schützen oder man könne ihm einen funktionellen Mehrwert bieten.