CODEWITHSUNDEEP
htmlautocomplete
RichardB
RichardB

Reputation: 2771

Why is the autocomplete attribute being ignored?

I'm pretty sure I remember that adding the autocomplete attribute to an <input> element used to work as expected, ie adding autocomplete="email" would mean the autocomplete would just show previously entered email addresses.

However, both Firefox and Chrome seem to only be using name and id to decide what to autocomplete with, and ignoring autocomplete unless it is saying to not autocomplete at all.

In my tests, the following doesn't do anything:

<input type="email" autocomplete="email">
<input type="email" title="email" autocomplete="email">
<input type="text" autocomplete="email">
<input type="email" autocomplete="on">
<input type="email" autocomplete="on email">
<label for="emai">Email</label>
<input type="email" id="emai" autocomplete="email">

The following autocomplete with the autocomplete value (though seem to be getting that value from elsewhere)

<input type="email" name="email" autocomplete="email">
<input type="email" id="email" autocomplete="email">
<input type="email" id="email" autocomplete="family-name">
<input type="email" name="email">
<input type="text" name="email" autocomplete="email">
<input type="email" id="username" autocomplete="family-name">

And these autocomplete with something other than the autocomplete value

<input type="email" id="email" autocomplete="family-name">
<input type="email" id="username" autocomplete="family-name">
<input type="email" id="username" autocomplete="email">
<input type="email" id="username" autocomplete="honorific-prefix">

None of the above tests suggest that the autocomplete attribute is doing anything at all. As I say, I'm sure it used to work as expected.

Things I would appreciate your thoughts on:

Upvotes: 0

Views: 60

Answers (1)

user22707019
user22707019

Reputation:

To to start with a quick and promising solution:

<input type="email" name="username" autocomplete="email">

What happens here is that type email should be connected to the valid control group (aka field name) username. The thing is, I could skip autocomplete="email" altogether and it will still make suggestions (if the browser allows them generally). But you definitely can't use autocomplete="on email". That's not valid.

Also, in this example both usernames and emails are suggested.

Now to the "hard truths":

If you are actually testing these inputs without all of the following requirements met, consider adjusting your tests according to the Mozilla guide you posted:

Note: In order to provide autocompletion, user-agents might require <input>/<select>/<textarea> elements to:

  • Have a name and/or id attribute
  • Be descendants of a <form> element
  • Be owned by a form with a submit button

However, that doesn't guarantee you will get the results you are looking for because the user agents (browsers) can add their own rules:

  • autocomplete forms where it's prohibited by the author;
  • prohibit autocompletion where it's allowed by the author;
  • make their own guesses on how to treat input fields.

Here is the full guide of scary volume: HTML Standard — but do take a look.

For example, one of the tables states:

An input element of type="password", that is preceded by an input element whose name="username", will receive autocomplete="current-password" attribute.

That said, browsers much more reliably pick up "autofill field types" from the name attribute (I don't think it's the same for id). If there are two inputs with the same name, they may be autofilled together, so that's where compound autocompletes enter:

<input type="email" name="username" autocomplete="section-spouse email">
<input type="email" name="username" autocomplete="section-child email">

They actually don't guarantee anything, but rather suggest that browsers will probably ignore most of that autocomplete field and go with their own rules.

The only reliable autocompletion I've seen was built with a huge number of third-party cookies, trackers and shadow DOM trees (HTML elements generated by some woodoo magic). Even my privacy settings couldn't protect me from Upwork revealing all my secrets.

And yet, name="username" and name="password" autocomplete="current-password" are the glue of most basic forms, and they usually work, at least after a few logins.

Sorry if that's not what you were looking for.

Upvotes: 2

Related Questions