HTML-Tipps für Webentwickler

Felder automatisch ausfüllen mit autocomplete bzw. autofill

LinkedIn Learning kostenlos und unverbindlich testen!

Jetzt testen Alle Abonnements anzeigen
Unabhängig davon, ob es sich bei Ihrem Projekt um eine "große" Website handelt oder eine "kleine", Sie einen Webshop aufsetzen wollen oder einen privaten Blog betreuen – eines haben alle Webseiten gemeinsam: die Basis ist HTML. Profitieren Sie in dieser praktischen Tipps&Tricks-Sammlung von der jahrelangen Erfahrung der Trainerin Florence Maurice, die Ihnen unbekannte Features nahe bringt, zur Übersicht über die einzelnen Versionen verhilft oder oftmals nur mit kleinen, pfiffigen Hinweisen Ihren Alltag als Webdesigner und -programmierer erleichtert.
05:29
  Lesezeichen setzen

Transkript

Formulare auszufüllen ist mühsam, das sollten Sie Ihren Nutzern so einfach wie möglich machen. Häufig werden dieselben Informationen eingegeben und ganz automatisch geht das Ausfüllen über Autofil. In diesem Formular ist der Autofil-Mechanismus aktiviert. Wenn ich hier beginne etwas zu schreiben, wähle ich mal "Frodd Beutlin" aus, und dann sehen Sie, sind gleich ganz viele Felder ausgefüllt. Ein weiteres Beispiel ist auf dieser Webseite zu sehen, es wird etwas ausgewählt und dann sind ganz viele Felder ausgefüllt. Der Vorteil davon ist, dass es natürlich weniger fehleranfällig ist, und der zweite große Vorteil ist, dass dadurch die Benutzer die Formulare schneller ausfüllen können. Was steckt denn technisch dahinter? Technisch steckt dahinter eine Erweiterung für das Autocomplete-Attribut. Das Autocomplete-Attribut kennen Sie vielleicht schon. Man kann angeben "autocomplete=off" oder auch "autocomplete=on", "autocomplete=on" ist der Standard, und wenn man "autocomplete=off" bei einem Formular angibt, dann speichert der Browser die Informationen nicht weiter, um sie dann später beispielsweise anzubieten zur Auswahl, und Sie können das auch beim einzelnen Feld alleine angeben. Autocomplete bekommt in der neunen Spezifikation der WHATWG, ist Autocomplete erweitert, es gibt noch die alte Funktionalität, das Sie angeben, "autocomplete=on" oder "autocomplete=off". Sie können bei Autocomplete jetzt aber auch sogenannte Tokens angeben, durch diese bestimmen, welche Informationen erweitert werden und die sind dann standardisiert und deshalb kann der Browser sie dann direkt ausfüllen. Was sind denn da für Werte möglich? Sie sehen ein Beispiel. Zuerst kann man schreiben einen eigenen Namen, der mit "section" beginnt und dann folgt etwas Eigenes. Das ist praktisch, wenn Sie mehrere Formularfelder zusammen gruppieren möchten, und dann kommen die standardisierten Namen, wobei es auch mehrere sein können. Ist ja auch klar, denn selbst so etwas, wie eine Adresse ist nicht banal, weil es kann ja eine Lieferadresse und eine Rechnungsadresse geben. Mit "shipping street-adress" geben Sie die Lieferadresse an, "billing" würden Sie für die Rechnungsadresse nehmen. Sie sehen dann eine Liste von Namen, die man an dieser Stelle nehmen kann, und außerdem kann man manchmal noch genauer spezifizieren, worum es sich handelt, beispielsweise bei einer Telefonnummer, da kann es ja sein, dass man eine andere Telefonnummer in der Arbeit oder zu Hause hat und das kann man dann auch so angeben. Am Beispiel der Telefonnummer sehen Sie auch, dass es die Möglichkeit gibt, einfach ein generisches Tel anzugeben oder genauer zu differenzieren. Im Zweifelsfall ist das Tel aber einfacher. In dieser Spezifikation finden Sie dann auch in einer Tabelle aufgeführt, bei welchen Feldern, was sinnvoll ist, zum Beispiel Name, die Angabe ist natürlich nur in Feldern des Typs "Text" sinnvoll. Es stellt sich natürlich auch die Frage, wie der Browser dann immer an die Informationen kommt, und da ist es beispielsweise so, dass Sie gefragt werden bei bestimmten Informationen, ob die gespeichert werden sollen und Sie können das dann auch bearbeiten. Dafür gehe ich einmal in die Einstellungen und gehe dann auf die erweiterten Einstellungen und da gibt es die Autofil-Einstellungen verwalten und da könnte ich das jetzt auch editieren und bearbeiten oder auch etwas Neues hinzufügen. Bei solchen Features ist es natürlich immer die Frage, wie schaut es mit der Browser-Unterstützung aus, und da kann man sagen, es ist etwas durchwachsen. Es gibt einen sehr schönen Artikel von Jason Grigsby, der hat sich da mit diesem Thema befasst und sich auch angeschaut, wie das in den einzelnen Browsern genau aussieht. Prinzipiell ist es so, dass es heute schon funktioniert im Prinzip in Chrome und Opera, im Firefox zu dieser Version noch nicht, auch nicht im Edge, die verwenden hingegen immer das Name-Attribut und sammeln da so Schlüssel/Wert-Paare, aber es gibt nicht in dieser vom den Autofil-Mechanismus. Was macht man? An sich ist das natürlich ein schöner Fall für progressive enhancement, denn man kann ja einfach sagen, man verwendet diese neuen Werte für Autocomplete, und Browser, die das nicht unterstützen, haben auch keinen Nachteil, dann gibt es halt nicht diesen Autofil-Mechanismus, aber in Browsern, die das bereits implementiert hat, ist dann ein wesentlich schnelleres Ausfüllen von Formularfeldern möglich.