How to prevent form elements from pre-populating i

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>

Answer 1

Use autocomplete="new-password"

Works a charm!

Answer 2

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:

• Chrome Browser Ignoring AutoComplete=Off
• "AutoComplete=Off" not working on Google Chrome Browser
• autocomplete ='off' is not working when the input type is password and make the input field above it to enable autocomplete