Disable form auto complete in HTML/JSX

Browsers have great feature called as “auto form fill”. But sometimes this feature really annoying users and developers. In the web there are some suggestions for removing this but most of them are wrong. I’m explaining correct way for disabling this feature for your forms.

Let me explain how auto form fill feature works. Browsers are looking for email and password inputs in forms and if there is then browser tries to auto fill these. If there are multiple email and password inputs and if both of them have disabled autocomplete property then only fills first inputs. And you must set an id to form. That’s the point. If you hide first email and password inputs then browser fills unseen inputs and doesn’t try to fill other form inputs. At the result you just add inputs at the beginning of the form and hide them. Yep, we talk too much, let’s code it for HTML:

<form id="my_form">
  <input autocomplete="off" type="email" value=""
    style="display:none !important" />
  <input autocomplete="new-password" type="password" value=""
    style="display:none !important" />
  ...
</form>

And let’s code for JSX:

<form id="my_form">
  <input autocomplete="off" type="email" value=""
    style={{ display: 'none !important' }} />
  <input autocomplete="new-password" type="password" value=""
    style={{ display: 'none !important' }} />
  ...
</form>

Take care of that please you don’t add name and id properties to inputs but only you must set autocomplete, type, value and style properties as you see. Yes, that’s it. Now you have a form which free from auto fill.

Happy coding!