Disable HTML form input autocomplete and autofill

disable-html-form-input-autocomplete-autofill.md

Disable HTML Form Input Autocomplete and Autofill

1. Add autocomplete="off" onto <form> element;
2. Add hidden <input> with autocomplete="false" as a first children element of the form.

<form autocomplete="off" method="post" action="">
    <input autocomplete="false" name="hidden" type="text" style="display:none;">
    ...

This formation is going to prevent Chrome and Firefox to offer autofill and autocomplete for all input fields inside the form.

I found a very simple solution to the problem. I set the readonly attribute on the input fields, which prevents automatic filling. Then I remove the readonly attribute on the onfocus event, when the user clicks on the input field, it becomes writable.
<input name="email" onfocus="this.removeAttribute('readonly')" readonly type="text">

readonly

The problem was solved with the solution in the following comment above.

I'm using react, I included readOnly in the inputs, combined it with useEffect, addEventListener, removeEventListener and the 'focus' event. This way, the field is not filled automatically.

It also works if you remove the readOnly attribute in the window's load event:

<input type="password" readonly id="MyPasswordInput" name="MyPasswordInput"/>

$(window).load(function () {
    $("#MyPasswordInput").removeAttr('readonly');
});

Just to clarify, NO need to change or add anything to the username/login input...