Wie wird das automatische Ausfüllen in Google Chrome ausgelöst?

191

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).

html google-chrome autofill Riesling
quelle

Antworten:

182

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:

  • Vorname: "first.*name|initials|fname|first$"
  • Nachname: "last.*name|lname|surname|last$|secondname|family.*name"
  • Email: "e.?mail"
  • Anschrift Zeile 1): "address.*line|address1|addr1|street"
  • Postleitzahl: "zip|postal|post.*code|pcode|^1z$"
kmote
quelle
3
Außerdem müssen Sie einen vollständigen <form> -Tag mit "action" und "method"
einreichen
Während dies möglicherweise für meine Tests relevant war, funktionieren nur die unten beschriebenen Methoden.
Micah
Ich vermute, dass die AutoFill-Regex-Konstanten nicht das einzige sind, was sie verwenden, sondern sich auch an Dinge aus benutzerdefinierten benannten Eingaben erinnern.
MetaGuru
1
Verwendete die URL in dieser Antwort und es war kaputt. Dies funktioniert jetzt: code.google.com/p/chromium/codesearch#chromium/src/components/…
Nathan
2
Die von @Nathan bereitgestellte URL funktioniert nicht mehr - Hier ist die aktuelle, bis sie erneut geändert wird
HungryBeagle
85

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!

So aktivieren Sie die automatische Vervollständigung in Ihren HTML-Formularen

Hier sind einige wichtige Punkte zum Aktivieren der automatischen Vervollständigung:

  • Verwenden Sie a <label>für alle Ihre <input>Felder
  • Fügen Sieautocomplete Ihren <input>Tags ein Attribut hinzu und füllen Sie es mithilfe dieser Anleitung aus .
  • Benennen Sie Ihre nameund autocompleteAttribute für alle <input>Tags korrekt

  • Beispiel :

    <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="[email protected]" required autocomplete="email">

<!-- note that "emailC" will not be autocompleted -->
<label for="frmEmailC">Confirm Email</label>
<input type="email" name="emailC" id="frmEmailC"
placeholder="[email protected]" required autocomplete="email">

<label for="frmPhoneNumA">Phone</label>
<input type="tel" name="phone" id="frmPhoneNumA"
placeholder="+1-555-555-1212" required autocomplete="tel">

So benennen Sie Ihre <input>Tags

Stellen 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
    • Verwenden Sie eines davon für name:name fname mname lname
    • Verwenden Sie eines davon für autocomplete:
      • name (für vollständigen Namen)
      • given-name (für Vorname)
      • additional-name (für den zweiten Vornamen)
      • family-name (für Nachnamen)
    • Beispiel: <input type="text" name="fname" autocomplete="given-name">
  • Email
    • Verwenden Sie eines davon für name:email
    • Verwenden Sie eines davon für autocomplete:email
    • Beispiel: <input type="text" name="email" autocomplete="email">
  • Adresse
    • Verwenden Sie eines davon für name:address city region province state zip zip2 postal country
    • Verwenden Sie eines davon für autocomplete:
      • Für eine Adresseingabe:
        • street-address
      • Für zwei Adresseneingänge:
        • address-line1
        • address-line2
      • address-level1 (Staat oder Provinz)
      • address-level2 (Stadt)
      • postal-code (Postleitzahl)
      • country
  • Telefon
    • Verwenden Sie eines davon für name:phone mobile country-code area-code exchange suffix ext
    • Verwenden Sie eines davon für autocomplete:tel
  • Kreditkarte
    • Verwenden Sie eines davon für name:ccname cardnumber cvc ccmonth ccyear exp-date card-type
    • Verwenden Sie eines davon für autocomplete:
      • cc-name
      • cc-number
      • cc-csc
      • cc-exp-month
      • cc-exp-year
      • cc-exp
      • cc-type
  • Benutzernamen
    • Verwenden Sie eines davon für name:username
    • Verwenden Sie eines davon für autocomplete:username
  • Passwörter
    • Verwenden Sie eines davon für name:password
    • Verwenden Sie eines davon für autocomplete:
      • current-password (für Anmeldeformulare)
      • new-password (für Anmelde- und Passwortänderungsformulare)

Ressourcen

Katie
quelle
39

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".

Micah
quelle
2
In welchen Browsern ist diese Spezifikation implementiert? irgendwelche Erfahrungen / Tests schon gemacht?
Staabm
Die W3C-Spezifikation besagt, dass die automatische Vervollständigung nur oder enthaltenon 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
Liam
1
Dies ist korrektes HTML, siehe WHATWG-Spezifikation und Google-Beitrag .
AlecRust
5

Sie müssen die Elemente entsprechend benennen, damit der Browser sie automatisch ausfüllt.

Hier ist die IETF-Spezifikation dafür:

http://www.ietf.org/rfc/rfc3106.txt 1

Lawinen
quelle
4

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>

JSBIN

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.

staabm
quelle
1
Ich bin mir nicht sicher, warum diese Antwort negativ bewertet wird. Das obige Beispiel funktioniert immer noch für mich mit den beschriebenen Browsern
staabm
1
Die in den obigen Beispielen gezeigte Autovervollständigung stammt von hier: html.spec.whatwg.org/multipage/forms.html#autofill
Bryan Rehbein
2

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

https://developers.google.com/web/fundamentals/input/form/label-and-name-inputs#use-metadata-to-enable-auto-complete

Riesling
quelle
0

Hier ist es die wahre Antwort:

Der einzige Unterschied besteht im Etikett selbst. Das "Nom" stammt aus "Name" oder "Nome" auf Portugiesisch.

Also hier ist was du brauchst:

  • Ein Formularumbruch;
  • EIN <label for="id_of_field">Name</label>
  • Ein <input id="id_of_field"></input>

Nichts mehr.

Totty.js
quelle
Ich habe auch herausgefunden, dass das Etikett auch die automatische Vervollständigung von Chrom auslösen kann.
EMFI
Ihr Punkt ist also, dass der Labelname auch beim Ausarbeiten der Felder für die automatische Vervollständigung verwendet wird? Diese Antwort ist nicht sehr klar
Liam
Eigentlich ist Nom aus dem Französischen. Aber ich habe es ohne Label funktionieren lassen, ein Platzhalter für die Eingabe mit dem richtigen Wert funktioniert auch.
AxelH
0

Hier ist die neue Liste der "Namen" von Google Autofill. Es gibt alle unterstützten Namen in jeder zulässigen Sprache.

autofill_regex_constants.cc

Alvargon
quelle
0

Google stellt jetzt folgende Dokumentation zur Verfügung:

Helfen Sie Benutzern, mit Autofill | schneller auszuchecken Web | Google-Entwickler

und

Erstaunliche Formulare erstellen: Verwenden Sie Metadaten, um die automatische Vervollständigung zu aktivieren Web | Google-Entwickler

Henry
quelle
Antworten mit nur Links werden nicht mehr hilfreich, wenn diese Links ausfallen, wie die erste in dieser Antwort.
Bfontaine
Stimmt, aber deshalb ist die Antwort ein Community-Wiki: andere zu ermutigen, dazu beizutragen. Auch das Downvoting eines Community-Wikis wirkt sich nicht auf den Autor aus, sondern dient nur dazu, Googles eigene Dokumentation zu begraben. Sie können jederzeit eine Community-Wiki-Antwort aktualisieren, insbesondere wenn diese so kurz und trocken ist wie das Aktualisieren eines Links!
Henry
-3

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');
reza.cse08
quelle