As I visit many new websites for the first time, I see that:

1. For some websites, putting my cursor in the email field of signup form immediately shows me email options from what I had entered in other websites.
2. For other websites, putting my cursor in the email field does not give me any email options. And, I have to manually type every letter of the email.

I couldn't find what piece of code differentiates the two cases. For my website, I am stuck with #2. I am trying to achieve #1, where user can just re-use emails entered in other websites.

I used some code like this:

<input type="email" name="email" id="frmEmailA" placeholder="[email protected]" required autocomplete="email">

As I visit many new websites for the first time, I see that:

1. For some websites, putting my cursor in the email field of signup form immediately shows me email options from what I had entered in other websites.
2. For other websites, putting my cursor in the email field does not give me any email options. And, I have to manually type every letter of the email.

I couldn't find what piece of code differentiates the two cases. For my website, I am stuck with #2. I am trying to achieve #1, where user can just re-use emails entered in other websites.

I used some code like this:

<input type="email" name="email" id="frmEmailA" placeholder="[email protected]" required autocomplete="email">

• javascript
• html
• google-chrome
• email

• use autocomplete="on" w3schools.com/TAGs/att_input_autocomplete.asp – Dmitry Masley Commented Feb 22, 2017 at 11:33
• Share your html form code snippet and on which browser you are testing this – Ambrish Pathak Commented Feb 24, 2017 at 14:26
• The autocomplete attribute isn't everything that you need to achieve automatically filling forms. You'll also need proper browser privacy settings. It does not matter that you provided an incorrect value to attribute - any value that is not equal to off by default will activate form autocompletion. – Tomasz Kajtoch Commented Feb 24, 2017 at 17:56
• Also, you have to differentiate between email input fields in normal forms and forms where the input is combined with a password field (the email field is the username). In this case, the browsers use a completely different mechanism for autocompletion (namely the password manager instead of normal form autocompletion). Is this input in the same form as a password input? – NineBerry Commented Feb 25, 2017 at 18:19

5 Answers 5

It seems that you want to enable autocomplete, but you have specified the wrong attribute.

SYNTAX:

Autocomplete="on | off"

In order to save the email address entered for the first time though, you need to have a form tag with the attribute method="POST" on it. It is also recommended to use the autocompletetype attribute to help the browsers populate the forms more accurately.

NOTE: In some cases on older browsers you may also need to add an action if the form doesn't have one. action="javascript:void(0)" works.

An example with autocomplete on and method="POST":

<form method="POST" action="javascript:void(0)">
    <input type="email" name="email" id="frmEmailA" placeholder="[email protected]" required autocomplete="on" autocompletetype=”email”>
    <input type="submit">
</form>

An example without autocomplete and method="POST":

<form>
    <input type="email" name="email" id="frmEmailA" placeholder="[email protected]" required autocomplete="off">
    <input type="submit">
</form>

See also How to trigger Autofill in Google Chrome?

The answers so far are wrong/outdated or incomplete.

Using autocomplete="email" is perfectly valid. But the browsers do not handle it very well at the moment. In Firefox and Chrome, only the name attribute is used for autocompletion. So you should stick with name="email".

If the Chrome user really wants to have a proper autocompletion for every type that autocomplete supports, he/she has to fill out the Autofill settings. After these settings are filled, the autocompletion does not depend on the name attribute anymore, but uses the type of autocomplete. I.E. it will suggest the user's email address for fields with autocomplete="email".

So in order to have the best browser support, you should keep <input name="email" autocomplete="email" [...]>. As soon as there has been at least one submitted form with name="email" or prefilled Autofill settings, the browser should actually autocomplete your input field.

Further Resources:

• caniuse: autocomplete attribute: on & off values
• caniuse: input[autocomplete] (values besides on/off)

For some websites, putting my cursor in the email field of signup form immediately shows me email options from what I had entered in other websites.

I cannot reproduce that on the latest Chrome on Mac OS X. You actually have to doubleclick the input for the autocompletion to show up.

Difference is in autocomplete attribute of input element.

Syntax : <input autocomplete="">

It allows the browser to automatically filled the input field based on the previously filled data.

Hence, In #1 value of autocomplete attribute should be on.

DEMO

E-mail: <input type="email" name="email" autocomplete="on">

In #2 value of autocomplete attribute should be off.

DEMO

E-mail: <input type="email" name="email" autocomplete="off">

The correct values for the autocomplete attribute is "on" or "off" as you can see at : https://www.w3schools.com/Tags/att_input_autocomplete.asp

Use autocomplete="on" in form tag. like below.

<form action="" method="post" autocomplete="on">
    <input type="email" name="email" id="frmEmailA" placeholder="[email protected]" required>
    <input type="submit" value="Submit">
</form>