Ich würde gerne wissen, ob es eine spezielle Markup gibt, um die Funktion zum automatischen Ausfüllen von Chrome für ein bestimmtes Formular zu aktivieren. Ich habe nur Fragen zum Deaktivieren gefunden, möchte aber wissen, ob ich dem HTML-Code eine Art Markup hinzufügen kann, um dem Browser mitzuteilen, dass dies die Eingabe für die Adresse ist oder dass dies die Postleitzahl ist Feld "zum korrekten Ausfüllen (vorausgesetzt, der Benutzer hat diese Funktion aktiviert).
Antworten:
UPDATE für 2017: Anscheinend enthält die Antwort von Katie aktuellere Informationen als meine. Zukünftige Leser: Geben Sie Ihre Antwort auf ihre Antwort .
Dies ist eine großartige Frage, für die es überraschend schwierig ist, Unterlagen zu erhalten. In vielen Fällen werden Sie feststellen, dass die Chrome Autofill-Funktion "einfach funktioniert". Mit dem folgenden HTML-Ausschnitt wird beispielsweise ein Formular erstellt, das zumindest für mich (Chrome Version 18) nach dem Klicken in das erste Feld automatisch ausgefüllt wird:
<!DOCTYPE html>
<html>
<body>
<form method="post">
First name:<input type="text" name="fname" /><br />
Last name: <input type="text" name="lname" /><br />
E-mail: <input type="text" name="email" /><br />
Phone: <input type="text" name="phone" /><br />
Address: <input type="text" name="address" /><br />
</form>
</body>
</html>Diese Antwort ist jedoch unbefriedigend, da sie die Lösung im Bereich der "Magie" belässt. Bei näherer Betrachtung habe ich erfahren, dass Chrome (und andere automatisch ausfüllbare Browser) in erster Linie auf kontextbezogene Hinweise angewiesen sind, um den Datentyp zu bestimmen, der in Formularelemente eingefügt werden soll. Beispiele für solche kontextbezogenen Hinweise sind das nameeines Eingabeelements, der das Element umgebende Text und ein beliebiger Platzhaltertext.
Vor kurzem hat das Chrome-Team jedoch anerkannt, dass dies eine unbefriedigende Lösung ist, und sie haben begonnen, auf eine Standardisierung in dieser Angelegenheit zu drängen. In einem sehr informativen Beitrag der Google Webmasters-Gruppe wurde dieses Problem kürzlich erörtert und erläutert:
Leider war es für Webmaster bisher schwierig sicherzustellen, dass Chrome und andere Anbieter zum Ausfüllen von Formularen ihr Formular korrekt analysieren können. Es gibt einige Standards; Sie belasten jedoch die Implementierung der Website erheblich, sodass sie in der Praxis nicht häufig eingesetzt werden.
(Die "Standards", auf die sie sich beziehen, sind eine neuere Version der Spezifikation, die in der obigen Antwort von Avalanchis erwähnt wurde.)
In dem Google-Beitrag wird die vorgeschlagene Lösung beschrieben (die in den Kommentaren des Beitrags auf erhebliche Kritik stößt). Sie schlagen die Verwendung eines neuen Attributs für diesen Zweck vor:
Fügen Sie dem Eingabeelement einfach ein Attribut hinzu, beispielsweise könnte ein E-Mail-Adressfeld folgendermaßen aussehen:
<input type=”text” name=”field1” x-autocompletetype=”email” />
... wo das x-für "experimentell" steht und entfernt wird, wenn & wenn dies zum Standard wird. Lesen Sie den Beitrag für weitere Details, oder wenn Sie tiefer graben möchten, finden Sie eine ausführlichere Erklärung des Vorschlags im whatwg-Wiki .
UPDATE:
Wie in diesen aufschlussreichen Antworten ausgeführt , finden Sie alle regulären Ausdrücke, die Chrome zum Identifizieren / Erkennen allgemeiner Felder verwendet autofill_regex_constants.cc.utf8. Um die ursprüngliche Frage zu beantworten, stellen Sie einfach sicher, dass die Namen Ihrer HTML-Felder mit diesen Ausdrücken übereinstimmen. Einige Beispiele sind:
"first.*name|initials|fname|first$""last.*name|lname|surname|last$|secondname|family.*name""e.?mail""address.*line|address1|addr1|street""zip|postal|post.*code|pcode|^1z$"Diese Frage ist ziemlich alt, aber ich habe eine aktualisierte Antwort !
Hier ist ein Link zur WHATWG-Dokumentation zum Aktivieren der automatischen Vervollständigung.
Google hat einen hübschen Leitfaden für die Entwicklung von Webanwendungen geschrieben, die für mobile Geräte geeignet sind. Sie haben einen Abschnitt darüber, wie die Eingaben in Formularen benannt werden, um das automatische Ausfüllen zu vereinfachen. Obwohl es für Mobilgeräte geschrieben wurde, gilt dies sowohl für Desktops als auch für Mobilgeräte!
Hier sind einige wichtige Punkte zum Aktivieren der automatischen Vervollständigung:
<label>für alle Ihre <input>Felderautocomplete Ihren <input>Tags ein Attribut hinzu und füllen Sie es mithilfe dieser Anleitung aus .nameund autocompleteAttribute für alle <input>Tags korrektBeispiel :
<label for="frmNameA">Name</label>
<input type="text" name="name" id="frmNameA"
placeholder="Full name" required autocomplete="name">
<label for="frmEmailA">Email</label>
<input type="email" name="email" id="frmEmailA"
placeholder="name@example.com" required autocomplete="email">
<!-- note that "emailC" will not be autocompleted -->
<label for="frmEmailC">Confirm Email</label>
<input type="email" name="emailC" id="frmEmailC"
placeholder="name@example.com" required autocomplete="email">
<label for="frmPhoneNumA">Phone</label>
<input type="tel" name="phone" id="frmPhoneNumA"
placeholder="+1-555-555-1212" required autocomplete="tel"><input>TagsStellen Sie zum Auslösen der automatischen Vervollständigung sicher, dass Sie die Attribute nameund autocompletein Ihren <input>Tags korrekt benennen . Dadurch wird das automatische Ausfüllen von Formularen automatisch ermöglicht. Stellen Sie sicher, dass Sie auch eine haben <label>! Diese Informationen finden Sie auch hier .
So benennen Sie Ihre Eingaben:
name:name fname mname lnameautocomplete:
name (für vollständigen Namen)given-name (für Vorname)additional-name (für den zweiten Vornamen)family-name (für Nachnamen)<input type="text" name="fname" autocomplete="given-name">name:emailautocomplete:email<input type="text" name="email" autocomplete="email">name:address city region province state zip zip2 postal country autocomplete:
street-addressaddress-line1address-line2address-level1 (Staat oder Provinz)address-level2 (Stadt)postal-code (Postleitzahl)countryname:phone mobile country-code area-code exchange suffix extautocomplete:telname:ccname cardnumber cvc ccmonth ccyear exp-date card-typeautocomplete:
cc-namecc-numbercc-csccc-exp-monthcc-exp-yearcc-expcc-typename:usernameautocomplete:usernamename:passwordautocomplete:
current-password (für Anmeldeformulare)new-password (für Anmelde- und Passwortänderungsformulare)Nach meinen Tests macht das x-autocompleteTag nichts. Verwenden autocompleteSie stattdessen Tags für Ihre Eingabe-Tags und legen Sie deren Werte gemäß der HTML-Spezifikation hier fest. Http://www.whatwg.org/specs/web-apps/current-work/multipage/association-of-controls-and-forms. html # autofill-field .
Beispiel:
<input name="fname" autocomplete="given-name" type="text" placeholder="First Name" required>Das übergeordnete Formular-Tag benötigt autocomplete = "on" und method = "POST".
on sollte . Dies ist also ein ungültiges Markup und kann zu Inkonsistenzen führen. Ich denke tatsächlich, dass die Platzierung im Autocomplete-Attribut irrelevant ist. Ich denke, es werden alle Attribute betrachtet und die automatische Vervollständigung ist eine der überprüften Attribute. offdefault
Sie müssen die Elemente entsprechend benennen, damit der Browser sie automatisch ausfüllt.
Hier ist die IETF-Spezifikation dafür:
Ich habe gerade mit der Spezifikation herumgespielt und ein gutes Arbeitsbeispiel bekommen - einschließlich einiger weiterer Felder.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
<form autocomplete="on" method="POST">
<fieldset>
<legend>Ship the blue gift to...</legend>
<p>
<label> Firstname:
<input name="fname" autocomplete="section-blue shipping given-name" type="text" required>
</label>
</p>
<p>
<label> Lastname:
<input name="fname" autocomplete="section-blue shipping family-name" type="text" required>
</label>
</p>
<p>
<label> Address: <input name=ba
autocomplete="section-blue shipping street-address">
</label>
</p>
<p>
<label> City: <input name=bc
autocomplete="section-blue shipping address-level2">
</label>
</p>
<p>
<label> Postal Code: <input name=bp
autocomplete="section-blue shipping postal-code">
</label>
</p>
</fieldset>
<fieldset>
<legend>Ship the red gift to...</legend>
<p>
<label> Firstname:
<input name="fname" autocomplete="section-red shipping given-name" type="text" required>
</label>
</p>
<p>
<label> Lastname:
<input name="fname" autocomplete="section-red shipping family-name" type="text" required>
</label>
</p>
<p>
<label> Address: <input name=ra
autocomplete="section-red shipping street-address">
</label>
</p>
<p>
<label> City: <input name=bc
autocomplete="section-red shipping address-level2">
</label>
</p>
<p>
<label> Postal Code: <input name=rp
autocomplete="section-red shipping postal-code">
</label>
</p>
</fieldset>
<fieldset>
<legend>payment address</legend>
<p>
<label> Firstname:
<input name="fname" autocomplete="billing given-name" type="text" required>
</label>
</p>
<p>
<label> Lastname:
<input name="fname" autocomplete="billing family-name" type="text" required>
</label>
</p>
<p>
<label> Address: <input name=ra
autocomplete="billing street-address">
</label>
</p>
<p>
<label> City: <input name=bc
autocomplete="billing address-level2">
</label>
</p>
<p>
<label> Postal Code: <input name=rp
autocomplete="billing postal-code">
</label>
</p>
</fieldset>
<input type="submit" />
</form>
</body>
</html>Es enthält 2 separate Adressbereiche sowie unterschiedliche Adresstypen. Getestet es auch auf iOS 8.1.0 und es scheint, dass es immer alle Felder auf einmal füllt, während Desktop-Chrom automatisch Adresse für Adresse ausfüllt.
Es sieht so aus, als würden wir mehr Kontrolle über diese Funktion zum automatischen Ausfüllen bekommen. Es gibt eine neue experimentelle API für Chrome Canary, mit der auf die Daten zugegriffen werden kann, nachdem der Benutzer danach gefragt wurde:
http://www.chromium.org/developers/using-requestautocomplete http://blog.alexmaccaw.com/requestautocomplete
neue infos von google:
http://googlewebmastercentral.blogspot.de/2015/03/helping-users-fill-out-online-forms.html
Hier ist es die wahre Antwort:
Dies funktioniert: http://jsfiddle.net/68LsL1sq/1/ <label for="name">Nom</label>
Dies nicht: http://jsfiddle.net/68LsL1sq/2/ <label for="name">No</label>
Der einzige Unterschied besteht im Etikett selbst. Das "Nom" stammt aus "Name" oder "Nome" auf Portugiesisch.
Also hier ist was du brauchst:
<label for="id_of_field">Name</label><input id="id_of_field"></input>Nichts mehr.
Hier ist die neue Liste der "Namen" von Google Autofill. Es gibt alle unterstützten Namen in jeder zulässigen Sprache.
Google stellt jetzt folgende Dokumentation zur Verfügung:
Helfen Sie Benutzern, mit Autofill | schneller auszuchecken Web | Google-Entwickler
und
In meinem Fall $('#EmailAddress').attr('autocomplete', 'off');wird nicht gearbeitet. Aber folgende Arbeiten auf Chrome Version 67 von jQuery.
$('#EmailAddress').attr('autocomplete', 'new-email');
$('#Password').attr('autocomplete', 'new-password');