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?
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!
Here are some key points on how to enable autocomplete:
<label>
for all your <input>
fieldsautocomplete
attribute to your <input>
tags and fill it in using this guide.name
and autocomplete
attributes correctly for all <input>
tagsExample:
<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">
<input>
tagsIn 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
: name fname mname lname
autocomplete
:
name
(for full name)given-name
(for first name)additional-name
(for middle name)family-name
(for last name)<input type="text" name="fname" autocomplete="given-name">
name
: email
autocomplete
: email
<input type="text" name="email" autocomplete="email">
name
: address city region province state zip zip2 postal country
autocomplete
:
street-address
address-line1
address-line2
address-level1
(state or province)address-level2
(city)postal-code
(zip code)country
name
: phone mobile country-code area-code exchange suffix ext
autocomplete
: tel
name
: ccname cardnumber cvc ccmonth ccyear exp-date card-type
autocomplete
:
cc-name
cc-number
cc-csc
cc-exp-month
cc-exp-year
cc-exp
cc-type
name
: username
autocomplete
: username
name
: password
autocomplete
:
current-password
(for sign-in forms)new-password
(for sign-up and password-change forms)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 :
As long as your names can be matched by these regular expressions, the autofill feature will work in most browsers.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With