Turn off autocomplete in modern browsers

Browser, forms, and HTML autocomplete

Almost everyone is familiar with the feature called autofill that our browser provides every time we sit to fill those lengthy forms. It is quite a life-saver. Especially for someone like me typing all those long addresses and email-ids isn't a very special feeling at all. I am a heavy user of the autofill feature.
But a few days back I was designing a form in HTML I encountered a very weird issue.

Autocomplete can’t be turned off so easily….

And to be frank I thought all it gonna take is just an autocomplete attribute on the form tag. But as I tried to implement it, the result came out to be dissatisfactory for me.
After few more rounds of trial and error, I opted for taking some cue and had a long walk through the StackOverflow threads. But all my efforts went into vain. Then after a lot of tries to dig out the truth and the logic behind the truth, I bumped into the fact that modern browsers like chrome, edge, firefox kind of ignore the attribute autocomplete. By the time I was quite lost.

Then I went to the MDN(Mozilla Developer Network) HTML guide and it quotes

If a site sets autocomplete="off" for a <form>, and the form includes username and password input fields, then the browser still offers to remember this login, and if the user agrees, the browser will autofill those fields the next time the user visits the page.

If a site sets autocomplete="off" for username and password <input> fields, then the browser still offers to remember this login, and if the user agrees, the browser will autofill those fields the next time the user visits the page.

Now what to do next?

The light came from MDN only. In the article only it is written that

Preventing autofilling with autocomplete=”new-password”

If you are defining a user management page where a user can specify a new password for another person, and therefore you want to prevent autofilling of password fields, you can use autocomplete="new-password".

It worked like magic. 🎉

But there is still a problem. There is no solution for other input fields.

So as I was going on I found out something interesting enough in a StackOverflow thread where one of the answers states to put the value of the autocomplete attribute to “nope”. I tried it and it worked nice. So I filled all the required input fields with autocomplete = “nope”.

The browser immediately reverts back to its previous behavior, that is it started auto-filling the form.

And the complexity of the follow-up solutions on StackOverflow also seemed to increase unnecessarily where JavaScript, jQuery took the baton to solve the problem and I set out on my journey of an easy way around.

Then I noticed that for the password field there is a unique string assigned as the attribute value and I tried to apply the same logic for all the input fields.

The thing worked like magic and the autocomplete feature is turned off immediately turned off. 🎉🎊
Though it works still it is not the actual solution.
Hope you liked the read and it saved your time and peace a little bit…!

Stay safe, Have a great day!