CODEWITHSUNDEEP
htmlforms
bobetko
bobetko

Reputation: 5168

How to prevent browser autofill feature on HTML form?

I am not talking about field autocomplete (when you click on the form's textbox and you get a dropdown with a list of previously entered values) but about the browser autofill feature that fills out the form with your personal data that browser saved previously (first, last, address, organization, phone, email, etc.). In chrome, autofill can be managed here: chrome://settings/autofill

People are using the terms autocomplete and autofill interchangeably, which adds to the confusion (I googled this to death). Everybody is talking about adding autocomplete="off" to your form or form input elements. That works for disabling autocomplete, but the browser's autofill feature still works.

For example, when I click on the telephone or email field, I get dropdowns with previous "entries," and clicking on any of the entries will fill out multiple fields in the form.

Is there way to disable autofill when designing form?

Upvotes: 5

Views: 2798

Answers (3)

Fasunle Kehinde Hussein
Fasunle Kehinde Hussein

Reputation: 15

All of the solutions above did not work for me.

Then, I thought that the browser saves the previous values based on the type of the field.

So, if I can switch the field type to a different kind e.g type="password" when I will actually use type="text";

So, once the first character is entered into the field, I will switch to the appropriate type and thus, browser will not be able to track that value.

This worked perfectly for me.

For example,

Solution:


<input name="password" type={password.length ? "text": "password"}/>

Depending on the framework or platform you are using, just dynamically assign the type using the example given above.

Recreate the Problem

Ideally, browser is supposed to remember the last value by its name, but I guess it uses type instead.

For more context, check the code below:

1.

<form>
  <label for="name">Name</label>
  <input type="text" placeholder="John Doe" id="name"/>
<form/>

And

2.

<form>
  <label for="school">School</label>
  <input type="text" placeholder="Enter your school" id="school"/>
<form/>

If the first one has been rendered previously and, on another page, you render the second one, it will autofill with the value of the first one.

Upvotes: 0

Spectric
Spectric

Reputation: 31987

You should be using autocomplete="chrome-off" for Chrome versions below Chrome88, after that autocomplete="off" should stop autofill (implemented this January, actually).

Upvotes: 0

ACE-CM
ACE-CM

Reputation: 59

Put within tag to prevent auto-fill within forms:

<form autocomplete="off" />

Upvotes: 1

Related Questions