Autocomplete bei Input-Feldern abschalten

Das am meisten ignorierte Attribut im Web-Umfeld lautet wohl autocomplete.  Dabei ist der kleine Helfer äußerst sinnvoll, suggeriert es doch dem DAU, das der Browser dessen Kreditkarten-Nummer nicht kennt – was wohl eher ein Trugschluss ist ;) Es gibt natürlich Browser (Safari) wo das automatische Ausfüllen von Formularen mit persönlichen Daten zum Grundkonzept gehört, alle Browser können (per Default) allerdings Formular-Felder speichern und bei der nächsten Nutzung des Formulars dieses vor ausfüllen.

Autocomplete ist für eine Datalist grundlegend.

So weit zur Theorie, in der Praxis schaffen es manche Browser nicht, diese Daten auch einer Domain zuzuordnen. Will heißen: Fülle ich auf der einen Seite ein Formular aus, dass ein Feld mit dem Namen „kreditkarte“ enthält und gehe zur nächsten Seite, die in einem Formular ein Feld mit gleichem Namen besitzt, wird es dort vor ausgefüllt.

Wer sich ein bischen mit dem Thema beschäftigt weiss, das die Daten aus dem Browser kommen, und nicht von der Webseite. ABER der durchschnittliche Internetnutzer dürfte wohl eher auf die „Woher haben die meine Daten“-Idee kommen. Es ist also bei manchen kritischen Feldern sinnvoll, das autocomplete abzuschalten. Dies sollte natürlich bei kritischen personenbezogenen Daten der Fall sein, aber auch bei den meisten Login-Formularen ist der Autocomplete Quatsch. Wer jetzt sagt: da muss ich aber Benutzername / Passwort jedesmal wieder neu eintippen – falsch! Logindaten werden im Browser separat gehandelt und der Browser kann (insofern man sie speichert) diese Formulare erkennen und automatisch ausfüllen. Login-Informationen ist ungleich Form Autocomplete!

Wie erreiche ich nun, dass ein Feld oder ein Formular nicht automatisch ausgefüllt wird? Das Attribut autocomplete kann entweder auf ein einzelnes Form-Element oder auf die gesamte Form angewendet werden. Für letzteres sperrt man dann den autocomplete für alle Formular-Elemente auf einmal:

<form method="post" autocomplete="off">

Ein einzelnes Formular-Element wird analog gesperrt:

<input type="text" name="kreditkarte" autocomplete="off">

Aufgrund der neuen Tags in HTML5 gibt es natürlich auch neue Möglichkeiten für den Einsatz des Attributs autocomplete. Am wichtigsten ist wohl der Einsatz in einer Datalist. Diese wird in der Regel für große Datenmengen eingesetzt und die Chance, das ein Benutzer zweimal den gleichen Wert verwenden will, ist gering. Das Autocomplete ist am besten in diesem Video erklärt:

httpv://youtu.be/UpURhGt9aBo

Also, beim nächsten Formular vielleicht kurz an das Attribut erinnern, und einsetzen. Es ist sehr schnell eingebaut, bringt aber einen großen Nutzen, denn es suggeriert dem Benutzer zusätzliche Sicherheit – vor allem im Checkout einer E-Commerce-Site!

Ähnliche Beiträge

99 Login-Screens als PSD Login-Screens sind wohl das am meistens vernachlässigte Thema im Bereich der Backend-Entwicklung, dabei gibt es inzwischen recht schöne Möglichkeiten ...
Dummy HTML Snippets für Entwickler Mal was schnelles für zwischendurch: In letzter Zeit ist irgendwie ein regelrechter Hype um das gute alte Lorem Ipsum entstanden. Es gibt den Standard...
Datenvisualisierung in HTML5 mit HumbleFinance Fast jedes Trackingtool bzw. eCommerce-Paket visualisiert heutzutage Daten als Graphen. Dabei werden entweder Verkaufszahlen oder Besucherzahlen in ne...
HTML5 Canvas in einfach – KineticJS Ich bin immer wieder erstaunt darüber was mit dem Canvas-Element alles möglich ist, meistens bin ich auch erstaunt darüber welcher Aufwand dazu betrie...

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.