How to prevent form elements from pre-populating in Chrome

Question

I am building a Bootstrap form and the email and password form elements show with pre-populated data from some other or some earlier form login on a different site. The Chrome browser is auto-populating the form elements.

Is there an HTML attribute of method in Bootstrap to force these form elements to null or empty on page load?

2015-10-29 -- here's the markup:

      <form autocomplete="off" method="post" role="form">
        <div class="form-group">
          <input name="formSubmitted" type="hidden" value="1">
        </div>
        <div class="form-group">
          <label for="username">Username</label>
          <input autocomplete="off" autofocus="autofocus" class="form-control" id="username" name="username" required type="text">
        </div>
        <div class="form-group">
          <label for="password">Password</label>
          <input autocomplete="off" class="form-control" id="password" name="password" required type="password">
        </div>
        <button class="btn btn-default" type="submit">Login</button>
      </form>

score 5 · Answer 1 · answered Jun 29 '18 at 13:55

5

Use autocomplete="new-password"

Works a charm!

answered Jun 29 '18 at 13:55

karmafunk

1,453
12
20

this was the only thing that worked for me, and should be the accepted answer. thanks! – david_nash May 15 '20 at 04:12
Agree this should be the accepted answer. – AndrewLeonardi Jan 10 '21 at 16:11

score 3 · Accepted Answer · edited May 23 '17 at 10:27

3

Use the autocomplete="off" attribute on the <form> or <input>.

from MDN:

autocomplete

This attribute indicates whether the value of the control can be automatically completed by the browser.

off
The user must explicitly enter a value into this field for every use, or the document provides its own auto-completion method; the browser does not automatically complete the entry.

on
The browser is allowed to automatically complete the value based on values that the user has entered during previous uses...

Also from MDN, see: How to Turn Off Form Autocompletion

Also see:

edited May 23 '17 at 10:27

Community

1
1

answered Oct 29 '15 at 18:48

Michael Benjamin

346,931
104
581
701

I did (prior to posting my OQ) -- that did not solve it. Then I moved `autocomplete="off"` to the form tag and that too did not solve it. Seems to only be a bug in Google Chrome. Unless I am l missing something. – H. Ferrence Oct 29 '15 at 18:51
Ok, must be a bug on Google Chrome (latest/greatest) that we must live with then. – H. Ferrence Oct 29 '15 at 18:58
Answer revised with Chrome troubleshooting. – Michael Benjamin Oct 29 '15 at 19:13
Ok, so it is a Chrome bug then. – H. Ferrence Oct 29 '15 at 19:18
You can call it a *bug*, but it's more likely deliberate behavior as Google may view `autocomplete="off"` as interfering with their preferred user-experience. They just choose to ignore it, just like they would probably ignore a `body` attribute named `ads="off"`. – Michael Benjamin Oct 29 '15 at 19:21
making Chrome _non-standards_ (like the days of IE) – H. Ferrence Oct 29 '15 at 19:24
Actually, following their own path with IE was a completely intentional strategy by Microsoft. They called it [***Embrace, Extend and Extinguish***](https://en.wikipedia.org/wiki/Embrace,_extend_and_extinguish). – Michael Benjamin Oct 29 '15 at 19:27
This solution does not work on modern browsers. Chrome just ignores "autocomplete" attribute – Yuvraj Patil Aug 02 '17 at 10:58
Use this autocomplete="new-password" See my answer below – karmafunk Feb 18 '21 at 19:05

How to prevent form elements from pre-populating in Chrome

2 Answers2

Linked