How does form auto-filling in the browser work?

Question

How does form autofill work in modern web browsers? Which are the most common techniques used in browsers that implement automatic form filling?

-- EDIT --

The question is not about autocomplete, is about form autofilling, which cares not only about the previously inputted values but also considers the meaning and structure of the field to be completed. Google Chrome implementation, for example, tries to parse the inputted fields to guess their type and structure. Or at least is that what I understood from the code linked above.

Answer 1

Take a look over at this answer by kmote.

Highlight is that the browser looks at the field's name tag and makes an educated guess at what sort of data would go there (regex matching is a good naive way to do this). Chrome is working to get some sort of standardization so that this isn't quite as hit-or-miss.

Answer 2

Different technologies and browsers use various methods to both calculate what to display as well as how they display it, but some sources to check out are:

• Google's high-level description
• How to implement it with jQuery (note that there is a jQuery autocomplete plugin as well).

If you are looking into implementing it (or just using it) yourself, I would highly recommend taking a look at the plugin.

Answer 3

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

In order to trigger autocomplete, all you have to do is name it right.

The following answer is from my original answer from here: https://stackoverflow.com/a/41965106/1696153

Here's a link to the official current WHATWG HTML Standard 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.

Answer 4

The first element of answer is simply the non standard HTML form's autocomplete attribute that was introduced with Internet Explorer a few years ago.

Ironically, you can read a good history an introduction on mozilla site here: The autocomplete attribute and web documents using XHTML