自动完成 HTML 表单

Question

I am looking for answers regarding auto complete for form fields.

How can I auto fill common inputs like First name, last name, address..?

In Chrome, If the user has a Google profile, fields can be autofilled.

It appears IE offers similar functionality:

(From MS Website) "You can use AutoComplete to store passwords and other information that you type into web form fields. When you turn on AutoComplete, Internet Explorer will automatically fill in the fields you type into web forms frequently, like your name and address."

Is there any way I can ensure autofill happens, cross-browser, using HTML/JS?

Answer 1

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

Now there IS a cross-browser standard on how to name your <input> tags in order to trigger autocomplete.

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 2

There is no cross browser way to do this, either the browser supports HTML5 and autofill, or it does'nt.

All you have to do to make it work, is use the correct names for the inputs, and the browser will handle the rest, and you have no access to whatever data the browser has stored.

<input type="text" name="fname" /> //first name
<input type="text" name="lname" /> //last name
<input type="text" name="email" /> //email
//etc...

FIDDLE

According to this answer , the regular expressions used by Chrome are as follows :

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

As long as your names can be matched by these regular expressions, the autofill feature will work in most browsers.

Answer 3

you can add autocomplete for form or each form fields. try this

<form autocomplete="on">
<input type="text" name="foo" />
....

</form>