How to trigger Autofill in Google Chrome?

Question

I would like to know if there is some kind of special markup to enable the Chrome autofill feature for a specific form. I only found questions about how to disable it, but I would like to know if I can add some kind of markup to the html code in order to tell the browser "this is the input for the address" or "this is the ZIP code field" to correctly fill it in (assumed the user activated this feature).

kmote · Accepted Answer · 2019-06-06T16:04:27.630

UPDATE for 2017: Looks like the answer from Katie has more up-to-date information than mine. Future readers: give your up-votes to her answer.

This is a great question and one for which documentation is surprisingly hard to come by. Actually, in many cases you will find that the Chrome Autofill functionality "just works." For example, the following snippet of html produces a form which, at least for me (Chrome v. 18), is automatically filled after clicking in the first field:

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

However, this answer is unsatisfactory, as it leaves the solution in the realm of "magic." Digging deeper I learned that Chrome (and other autofill-enabled browsers) primarily rely on contextual clues to determine the type of data that should be filled into form elements. Examples of such contextual clues include the name of an input element, the text surrounding the element, and any placeholder text.

Recently, however, the Chrome team acknowledged that this is an unsatisfactory solution, and they have begun pressing for standardization in this matter. A very informative post from the Google Webmasters group recently discussed this issue, explaining:

Unfortunately, up to now it has been difficult for webmasters to ensure that Chrome and other form-filling providers can parse their form correctly. Some standards exist; but they put onerous burdens on the implementation of the website, so they’re not used much in practice.

(The "standards" they refer to is a more recent verion of the spec mentioned in Avalanchis' answer above.)

The Google post goes on to describe their proposed solution (which is met by significant criticism in the comments of the post). They propose the use of a new attribute for this purpose:

Just add an attribute to the input element, for example an email address field might look like:

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

...where the x- stands for "experimental" and will be removed if & when this becomes a standard. Read the post for more details, or if you want to dig deeper, you will find a more complete explanation of the proposal on the whatwg wiki.

UPDATE: As pointed out in these insightful answers, all the regular expressions Chrome uses to identify/recognize common fields can be found in autofill_regex_constants.cc.utf8. So to answer the original question, just make sure the names for your html fields get matched by these expressions. Some examples include:

first name: "first.*name|initials|fname|first$"
last name: "last.*name|lname|surname|last$|secondname|family.*name"
email: "e.?mail"
address (line 1): "address.*line|address1|addr1|street"
zipcode: "zip|postal|post.*code|pcode|^1z$"

Also, you got to submit a complete
-Tag with "action" and "method" — qualle, May 06 '13 at 13:02
While this possibly used to be relevant from my testing only the methods I've outlined below actually work. — Micah, Oct 02 '13 at 20:44
I am guessing that the autofill regex constants is not the only thing it uses, it is remembering things from custom named inputs as well. — CloudMeta, Apr 15 '14 at 12:19
Note: Chromium will also look at the input **label** as well as the name, which in my cause was causing issues, see: http://www.michaelbromley.co.uk/blog/437/fixing-chrome-autofill-mysterious-wrong-values-solved — Michael Bromley, Jul 10 '15 at 15:01
Used the url in this answer and it was broken. This works now: https://code.google.com/p/chromium/codesearch#chromium/src/components/autofill/core/browser/autofill_regex_constants.cc — Nathan, Jul 25 '15 at 11:50
URL that @Nathan provided doesn't work anymore - Here's the current one, until they change it again :) https://cs.chromium.org/chromium/src/components/autofill/core/common/autofill_regex_constants.cc — HungryBeagle, Sep 07 '17 at 18:14
In the future it might turn into a specification: https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#autofill — AMilassin, Oct 10 '17 at 07:37

Katie · Answer 2 · 2019-08-02T18:36:35.853

This question is pretty old but I have an updated answer!

Here's a link to the WHATWG documentation for enabling autocomplete.

Google wrote a pretty nice guide for developing web applications that are friendly for mobile devices. They have a section on how to name the inputs on forms to easily use auto-fill. Eventhough it's written for mobile, this applies for both desktop and mobile!

How to Enable AutoComplete on your HTML forms

Here are some key points on how to enable autocomplete:

Use a <label> for all your <input> fields
Add a autocomplete attribute to your <input> tags and fill it in using this guide.
Name your name and autocomplete attributes correctly for all <input> tags

Example:

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

How to name your `<input>` tags

In order to trigger autocomplete, make sure you correctly name the name and autocomplete attributes in your <input> tags. This will automatically allow for autocomplete on forms. Make sure also to have a <label>! This information can also be found here.

Here's how to name your inputs:

Name
- Use any of these for name: name fname mname lname
- Use any of these for autocomplete:
  - name (for full name)
  - given-name (for first name)
  - additional-name (for middle name)
  - family-name (for last name)
- Example: <input type="text" name="fname" autocomplete="given-name">
Email
- Use any of these for name: email
- Use any of these for autocomplete: email
- Example: <input type="text" name="email" autocomplete="email">
Address
- Use any of these for name: address city region province state zip zip2 postal country
- Use any of these for autocomplete:
  - For one address input:
    - street-address
  - For two address inputs:
    - address-line1
    - address-line2
  - address-level1 (state or province)
  - address-level2 (city)
  - postal-code (zip code)
  - country
Phone
- Use any of these for name: phone mobile country-code area-code exchange suffix ext
- Use any of these for autocomplete: tel
Credit Card
- Use any of these for name: ccname cardnumber cvc ccmonth ccyear exp-date card-type
- Use any of these for autocomplete:
  - cc-name
  - cc-number
  - cc-csc
  - cc-exp-month
  - cc-exp-year
  - cc-exp
  - cc-type
Usernames
- Use any of these for name: username
- Use any of these for autocomplete: username
Passwords
- Use any of these for name: password
- Use any of these for autocomplete:
  - current-password (for sign-in forms)
  - new-password (for sign-up and password-change forms)

Resources

Current WHATWG HTML Standard for autocomplete.
"Create Amazing Forms" from Google. Seems to be updated almost daily. Excellent read.
"Help Users Checkout Faster with Autofill" from Google in 2015.

Very helpful. I couldn't figure out where the suburb from the autofill address goes though. Suburb is a field here: chrome://settings/addresses — MadMac, Apr 05 '21 at 05:57

score 39 · Answer 3 · edited Aug 20 '14 at 20:11

39

From my testing, the x-autocomplete tag does nothing. Instead use autocomplete tags on your input tags, and set their values according to the HTML spec here http://www.whatwg.org/specs/web-apps/current-work/multipage/association-of-controls-and-forms.html#autofill-field .

Example:

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

The parent form tag needs autocomplete="on" and method="POST".

edited Aug 20 '14 at 20:11

Dorian

19,009
8
108
111

answered May 31 '13 at 19:18

Micah

9,811
12
60
88

2

in which browsers is this spec implemented? any experience/tests done yet? – staabm Nov 06 '14 at 15:50
The [W3C spec](https://www.w3.org/wiki/HTML/Elements/input/text) states that autocomplete should **only contain** `on`, `off` or `default`. So this is invalid mark up and will be prone to inconsistencies. I actually think the placement in the autocomplete attribute is irrelevant. I'd guess it looks at all attributes and autocomplete happens to be one of those it checks. – Liam Nov 20 '15 at 08:56
1

This is correct HTML, see [WHATWG spec](https://html.spec.whatwg.org/multipage/forms.html#autofilling-form-controls:-the-autocomplete-attribute) and [Google's post](https://developers.google.com/web/updates/2015/06/checkout-faster-with-autofill?hl=en). – AlecRust Sep 12 '16 at 13:55

score 5 · Answer 4 · answered Oct 17 '11 at 21:41

5

You need to name the elements appropriately so that the browser will autofill them.

Here's the IETF spec for this:

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

answered Oct 17 '11 at 21:41

Avalanchis

4,243
2
34
46

score 4 · Answer 5 · edited Nov 20 '15 at 08:50

I just played arround with the spec and got a nice working example - including a few more fields.

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

It contains 2 separate address areas and also differen address-types. Tested it also on iOS 8.1.0 and it seems that it always fill all fields at once, while desktop chrome autofill address by address.

Not sure why this answer gets downvotes. The example above still works for me using the described browsers — staabm, Jul 04 '15 at 10:47
The autocomplete shown in the above examples are from here: https://html.spec.whatwg.org/multipage/forms.html#autofill — Bryan Rehbein, Feb 22 '16 at 01:44

Riesling · Answer 6 · 2015-03-19T15:01:18.807

Looks like we'll get more control about this autofill feature, there is a new experimental API coming to Chrome Canary, which can be used to access the data after asking the user for it:

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

new infos by 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

score 0 · Answer 7 · answered Nov 07 '14 at 15:31

0

Here it is the real answer:

This works: http://jsfiddle.net/68LsL1sq/1/ <label for="name">Nom</label>
This not: http://jsfiddle.net/68LsL1sq/2/ <label for="name">No</label>

The only difference is in the label itself. The "Nom" cames from "Name" or "Nome" in portuguese.

So here is what you need:

A form wrapper;
A <label for="id_of_field">Name</label>
An <input id="id_of_field"></input>

Nothing more.

answered Nov 07 '14 at 15:31

Totty.js

14,070
25
93
165

i figured out, too, that the label can also trigger chromes autocompletion. – emfi Sep 07 '15 at 09:59
So your point is that the label name is also used when working out the auto complete fields? This answer isn't very clear – Liam Nov 20 '15 at 08:52
Actually Nom is from the french. But I made it work without a Label, a placeholder for the input with the correct value work as well. – AxelH Jan 07 '16 at 11:20

henry · Answer 8 · 2020-02-18T20:44:04.977

0

Google now provides documentation for this:

Help users checkout faster with Autofill | Web | Google Developers

and

Create Amazing Forms: Use metadata to enable auto-complete | Web | Google Developers

edited Feb 18 '20 at 20:44

answered Sep 19 '17 at 15:34

henry

3,653
2
23
35

Answers with only links become unhelpful if these links go down, like the first one in that answer. – bfontaine Feb 18 '20 at 17:24
True but that's why the answer's a community wiki: to encourage others to contribute to it. Also downvoting a community wiki doesn't impact the author, it only serves to bury Google's own documentation. Always feel free to update a community wiki answer, especially if it's something as cut and dry as updating a link! – henry Feb 18 '20 at 20:43

score 0 · Answer 9 · edited Aug 22 '18 at 07:13

0

Here is the new list of Google Autofill "names". There are all the supported names in any allowed language.

autofill_regex_constants.cc

edited Aug 22 '18 at 07:13

Michiel

3,782
3
28
40

answered Nov 28 '17 at 12:36

Alvargon

169
1
8

score -3 · Answer 10 · answered Jul 22 '18 at 16:04

-3

In my case, $('#EmailAddress').attr('autocomplete', 'off'); is not worked. But following works on chrome Version 67 by jQuery.

$('#EmailAddress').attr('autocomplete', 'new-email');
$('#Password').attr('autocomplete', 'new-password');

answered Jul 22 '18 at 16:04

reza.cse08

5,172
38
34

How to trigger Autofill in Google Chrome?

10 Answers10

How to Enable AutoComplete on your HTML forms

How to name your `<input>` tags

Resources

JSBIN

Linked

Related

How to trigger Autofill in Google Chrome?

10 Answers10

How to Enable AutoComplete on your HTML forms

How to name your <input> tags

Resources

JSBIN

Linked

Related

How to name your `<input>` tags