Jak uruchomić autouzupełnianie w Google Chrome?

191

Chciałbym wiedzieć, czy istnieje jakiś specjalny znacznik, aby włączyć funkcję autouzupełniania Chrome dla określonego formularza. Znalazłem tylko pytania, jak to wyłączyć, ale chciałbym wiedzieć, czy mogę dodać jakiś kod do kodu HTML, aby powiedzieć przeglądarce „to jest adres adresu” lub „to jest kod pocztowy pole ”, aby poprawnie go wypełnić (zakładając, że użytkownik aktywował tę funkcję).

html google-chrome autofill Riesling
źródło

Odpowiedzi:

182

AKTUALIZACJA na rok 2017: Wygląda na to, że odpowiedź Katie zawiera więcej aktualnych informacji niż moja. Przyszli czytelnicy: oddaj głos na jej odpowiedź .

To świetne pytanie, dla którego dokumentacja jest zaskakująco trudna do zdobycia. W rzeczywistości w wielu przypadkach okaże się, że funkcja autouzupełniania Chrome „po prostu działa”. Na przykład następujący fragment kodu HTML tworzy formularz, który przynajmniej dla mnie (Chrome w. 18) jest automatycznie wypełniany po kliknięciu pierwszego pola:

<!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>

Jednak ta odpowiedź jest niezadowalająca, ponieważ pozostawia rozwiązanie w dziedzinie „magii”. Głębsze kopanie Dowiedziałem się, że Chrome (i inne przeglądarki z włączonym autouzupełnianiem) polegają przede wszystkim na wskazówkach kontekstowych w celu określenia rodzaju danych, które należy wypełnić w elementach formularza. Przykłady takich wskazówek kontekstowych obejmują nameelement wejściowy, tekst otaczający element i dowolny tekst zastępczy.

Jednak ostatnio zespół Chrome przyznał, że jest to niezadowalające rozwiązanie, i zaczęli nalegać na standaryzację w tej sprawie. Bardzo pouczający post z grupy Google Webmasters ostatnio omawiał ten problem, wyjaśniając:

Niestety do tej pory webmasterzy mieli trudności z zapewnieniem, że Chrome i inni dostawcy wypełniania formularzy mogą poprawnie parsować swoje formularze. Istnieją pewne standardy; ale nakładają ciężkie obciążenia na wdrożenie strony internetowej, więc nie są one często stosowane w praktyce.

(„Standardy”, do których się odnoszą, to najnowsza wersja specyfikacji wymienionej w odpowiedzi Avalanchisa powyżej).

W dalszej części posta Google opisano ich proponowane rozwiązanie (co spotkało się z poważną krytyką w komentarzach do postu). Proponują użycie nowego atrybutu do tego celu:

Wystarczy dodać atrybut do elementu wejściowego, na przykład pole adresu e-mail może wyglądać następująco:

<input type=”text” name=”field1” x-autocompletetype=”email” />

...gdzie x- oznacza „eksperymentalny” i zostanie usunięty, jeśli i kiedy stanie się standardem. Przeczytaj post, aby uzyskać więcej informacji, lub jeśli chcesz kopać głębiej, znajdziesz pełniejsze wyjaśnienie propozycji na wiki whatwg .

AKTUALIZACJA: Jak wskazano w tych wnikliwych odpowiedziach , wszystkie wyrażenia regularne używane przez Chrome do identyfikowania / rozpoznawania wspólnych pól można znaleźć autofill_regex_constants.cc.utf8. Aby odpowiedzieć na pierwotne pytanie, upewnij się, że nazwy pól HTML są zgodne z tymi wyrażeniami. Niektóre przykłady obejmują:

  • Imię: "first.*name|initials|fname|first$"
  • nazwisko: "last.*name|lname|surname|last$|secondname|family.*name"
  • e-mail: "e.?mail"
  • adres (wiersz 1): "address.*line|address1|addr1|street"
  • kod pocztowy: "zip|postal|post.*code|pcode|^1z$"
kmote
źródło
3
Ponadto musisz przesłać pełny <form> -Tag z „action” i „method”
Qualle
Chociaż może to mieć znaczenie w moich testach, w rzeczywistości działają tylko metody, które przedstawiłem poniżej.
Micheasza
Zgaduję, że stałe regexu autouzupełniania nie są jedyną rzeczą, której używa, zapamiętuje również rzeczy z niestandardowych nazwanych danych wejściowych.
MetaGuru,
1
Użyłem adresu URL w tej odpowiedzi i został on zepsuty. Działa to teraz: code.google.com/p/chromium/codesearch#chromium/src/components/…
Nathan
2
Adres URL podany przez @Nathan już nie działa - Oto bieżący, dopóki nie zmienią go ponownie :) cs.chromium.org/chromium/src/components/autofill/core/common/…
HungryBeagle
85

To pytanie jest dość stare, ale mam zaktualizowaną odpowiedź !

Oto link do dokumentacji WHATWG w celu włączenia autouzupełniania.

Google napisał całkiem niezły przewodnik do tworzenia aplikacji internetowych przyjaznych dla urządzeń mobilnych. Mają sekcję na temat nazewnictwa danych wejściowych w formularzach, aby łatwo korzystać z automatycznego wypełniania. Chociaż napisano to na urządzenia mobilne, dotyczy to zarówno komputerów stacjonarnych, jak i mobilnych!

Jak włączyć autouzupełnianie w formularzach HTML

Oto kilka kluczowych punktów, jak włączyć autouzupełnianie:

  • Użyj a <label>dla wszystkich swoich <input>pól
  • Dodaj autocompleteatrybut do swoich <input>tagów i wypełnij go, korzystając z tego przewodnika .
  • Nazwij swój namei autocompleteatrybuty poprawnie dla wszystkich <input>tagów

  • Przykład :

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

Jak nazwać swoje <input>tagi

Aby uruchomić autouzupełnianie, upewnij się, że poprawnie nazywasz namei autocompleteatrybuty w <input>tagach. Umożliwi to automatyczne uzupełnianie formularzy. Upewnij się także, aby mieć <label>! Informacje te można również znaleźć tutaj .

Oto jak nazwać swoje dane wejściowe:

  • Imię
    • Użyj dowolnego z nich do name:name fname mname lname
    • Użyj dowolnego z nich do autocomplete:
      • name (pełne imię i nazwisko)
      • given-name (na imię)
      • additional-name (dla drugiego imienia)
      • family-name (dla nazwiska)
    • Przykład: <input type="text" name="fname" autocomplete="given-name">
  • E-mail
    • Użyj dowolnego z nich do name:email
    • Użyj dowolnego z nich do autocomplete:email
    • Przykład: <input type="text" name="email" autocomplete="email">
  • Adres
    • Użyj dowolnego z nich do name:address city region province state zip zip2 postal country
    • Użyj dowolnego z nich do autocomplete:
      • Dla jednego adresu:
        • street-address
      • Dla dwóch wejść adresowych:
        • address-line1
        • address-line2
      • address-level1 (stan lub prowincja)
      • address-level2 (Miasto)
      • postal-code (kod pocztowy)
      • country
  • Telefon
    • Użyj dowolnego z nich do name:phone mobile country-code area-code exchange suffix ext
    • Użyj dowolnego z nich do autocomplete:tel
  • Karta kredytowa
    • Użyj dowolnego z nich do name:ccname cardnumber cvc ccmonth ccyear exp-date card-type
    • Użyj dowolnego z nich do autocomplete:
      • cc-name
      • cc-number
      • cc-csc
      • cc-exp-month
      • cc-exp-year
      • cc-exp
      • cc-type
  • Nazwy użytkowników
    • Użyj dowolnego z nich do name:username
    • Użyj dowolnego z nich do autocomplete:username
  • Hasła
    • Użyj dowolnego z nich do name:password
    • Użyj dowolnego z nich do autocomplete:
      • current-password (w przypadku formularzy logowania)
      • new-password (w przypadku formularzy rejestracji i zmiany hasła)

Zasoby

Katie
źródło
39

Z moich testów x-autocompletetag nic nie robi. Zamiast tego użyj autocompleteznaczników na znacznikach wejściowych i ustaw ich wartości zgodnie ze specyfikacją HTML tutaj http://www.whatwg.org/specs/web-apps/current-work/multipage/association-of-controls-and-forms. html # pole autouzupełniania .

Przykład:

<input name="fname" autocomplete="given-name" type="text" placeholder="First Name" required>

Nadrzędny znacznik formularza wymaga autocomplete = „on” i method = „POST”.

Micheasz
źródło
2
w których przeglądarkach jest zaimplementowana ta specyfikacja? jakieś doświadczenie / testy już zrobione?
staabm
Specyfikacja W3C stwierdza, że ​​autouzupełnianie powinno zawierać tylko on , offlub default. To jest nieprawidłowa marża i będzie podatna na niespójności. Myślę, że umieszczenie w atrybucie autouzupełniania jest nieistotne. Sądzę, że wygląda na wszystkie atrybuty, a autouzupełnianie jest jednym z tych, które sprawdza.
Liam,
1
To jest poprawny HTML, zobacz specyfikację WHATWG i post Google .
AlecRust
4

Po prostu grałem ze specyfikacją i otrzymałem dobry przykład działania - w tym kilka innych dziedzin.

<!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

Zawiera 2 oddzielne obszary adresowe, a także różne typy adresów. Przetestowałem to również na iOS 8.1.0 i wygląda na to, że zawsze wypełnia wszystkie pola jednocześnie, a adres autouzupełniania chrome na pulpicie według adresu.

staabm
źródło
1
Nie jestem pewien, dlaczego ta odpowiedź jest negatywna. Powyższy przykład nadal działa dla mnie przy użyciu opisanych przeglądarek
staabm
1
Autouzupełnianie pokazane w powyższych przykładach jest stąd: html.spec.whatwg.org/multipage/forms.html#autofill
Bryan Rehbein
2

Wygląda na to, że uzyskamy większą kontrolę nad tą funkcją autouzupełniania, na Chrome Canary pojawi się nowy eksperymentalny interfejs API, którego można użyć do uzyskania dostępu do danych po zapytaniu użytkownika:

http://www.chromium.org/developers/using-requestautocomplete http://blog.alexmaccaw.com/requestautocomplete

nowe informacje od 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
źródło
0

Oto prawdziwa odpowiedź:

Jedyną różnicą jest sama etykieta. Nazwa „Nom” pochodzi od „Name” lub „Nome” w języku portugalskim.

Oto, czego potrzebujesz:

  • Owijarka formularzy;
  • ZA <label for="id_of_field">Name</label>
  • Na <input id="id_of_field"></input>

Nic więcej.

Totty.js
źródło
doszedłem również do wniosku, że etykieta może również wyzwalać automatyczne uzupełnianie chromów.
emfi
Więc chodzi o to, że nazwa etykiety jest również używana podczas opracowywania pól autouzupełniania? Ta odpowiedź nie jest bardzo jasna
Liam,
W rzeczywistości Nom pochodzi z Francji. Ale sprawiłem, że działało bez Etykiety, symbolu zastępczego dla danych wejściowych o poprawnej wartości.
AxelH
0

Oto nowa lista „nazw” autouzupełniania Google. Istnieją wszystkie obsługiwane nazwy w dowolnym dozwolonym języku.

autofill_regex_constants.cc

Alvargon
źródło
0

Google udostępnia teraz dokumentację dotyczącą tego:

Pomóż użytkownikom szybciej realizować transakcje dzięki Autouzupełnianiu | Internet | Google Developers

i

Utwórz niesamowite formularze: użyj metadanych, aby włączyć automatyczne uzupełnianie | Internet | Google Developers

Henry
źródło
Odpowiedzi zawierające tylko linki stają się nieprzydatne, jeśli te linki spadną, podobnie jak pierwszy w tej odpowiedzi.
bfontaine
To prawda, ale właśnie dlatego odpowiedzią jest wiki społeczności: aby zachęcić innych, aby wnieśli swój wkład. Również głosowanie na wiki społeczności nie ma wpływu na autora, służy jedynie do zakopania własnej dokumentacji Google. Zawsze możesz zaktualizować odpowiedź wiki społeczności, szczególnie jeśli jest to coś tak wytrawnego i suchego jak aktualizacja linku!
Henry
-3

W moim przypadku $('#EmailAddress').attr('autocomplete', 'off');nie działa. Ale następujące prace działają na chromie w wersji 67 autorstwa jQuery.

$('#EmailAddress').attr('autocomplete', 'new-email');
$('#Password').attr('autocomplete', 'new-password');
reza.cse08
źródło