Geek Answers Handbook

Chrome email field autocomplete options that don’t appear for my website

When I first visit many new websites, I see that:

  • For some websites, placing my cursor in the email field of the registration form immediately displays the email settings from what I entered on other websites.
  • For other websites, my cursor in the email field does not give me any email options. And I have to manually type each email.

I could not find which part of the code distinguishes two cases. For my site, I'm stuck with # 2. I am trying to reach # 1 where the user can simply reuse emails entered on other sites.

I used the following code:

<input type="email" name="email" id="frmEmailA" placeholder="name@example.com" required autocomplete="email">
+8
javascript html google-chrome email
source share
5 answers

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

SYNTAX:

AutoFill = "on | off"


To save your email address for the first time, you must have a form tag with the method="POST" attribute. It is also recommended that you use the autocompletetype attribute autocompletetype that browsers more accurately fill out forms.

NOTE. In some cases, in older browsers, you may also need to add an action if not in its form. action="javascript:void(0)" works.

An example with autocompletion and method="POST" :

 <form method="POST" action="javascript:void(0)"> <input type="email" name="email" id="frmEmailA" placeholder="name@example.com" required autocomplete="on" autocompletetype="email"> <input type="submit"> </form>

An example without autocompletion and method="POST" :

 <form> <input type="email" name="email" id="frmEmailA" placeholder="name@example.com" required autocomplete="off"> <input type="submit"> </form>

See also How to start autocomplete in Google Chrome?

+3
source share

The difference is in the autocomplete attribute of the autocomplete element.

Syntax: <input autocomplete="">

This allows the browser to automatically fill in the input field based on previously completed data.

Therefore, the In #1 value #1 the autocomplete attribute must be on .

Demo

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

In #2 value of the autocomplete attribute should be off .

Demo

 E-mail: <input type="email" name="email" autocomplete="off">
+2
source share

Valid values ​​for the autocomplete attribute are "on" or "off" , as you can see at: https://www.w3schools.com/Tags/att_input_autocomplete.asp

0
source share

Use autocomplete="on" in the form tag . as shown below.

 <form action="" method="post" autocomplete="on"> <input type="email" name="email" id="frmEmailA" placeholder="name@example.com" required> <input type="submit" value="Submit"> </form>
0
source share

Answers are still incorrect / outdated or incomplete.

Using autocomplete="email" works fine . But browsers don't do it very well. Firefox and Chrome use only the name attribute for autocomplete. Therefore, you must adhere to name="email" .

If a Chrome user really wants to have the correct autocomplete for each type supported by autocomplete , he should fill in the Autocomplete Options . After filling in these settings, autocompletion no longer depends on the name attribute, but uses the autocomplete type. I.E. it will suggest the user's email address for fields with autocomplete="email" .

So, in order to have better browser support, you should save <input name="email" autocomplete="email" [...]> . As soon as at least one submitted form with name="email" or pre-filled autofill settings is submitted, the browser should actually autofill your input field.

Additional resources:

For some websites, placing my cursor in the email field of the registration form immediately displays the email settings from what I entered on other websites.

I cannot reproduce this in the latest Chrome on Mac OS X. You really need to double-click the input to autocomplete so that it displays.

-2
source share

More articles:


All Articles