Chrome email field autocomplete options not showing for my website

Question

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

Answer 1

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?

Answer 2

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

Answer 3

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.