如何防止表单元素在 Chrome 中预填充

Question

我正在构建一个 Bootstrap 表单，并且电子邮件和密码表单元素显示了来自其他站点或其他站点上的一些早期表单登录的预填充数据。 Chrome 浏览器正在自动填充表单元素。

Bootstrap 中是否有方法的 HTML 属性来强制这些表单元素在页面加载时为 null 或为空？

2015-10-29 -- 这是标记：

      <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

在 <form> 或 <input> 上使用 autocomplete="off" 属性。

来自 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...

同样来自 MDN，参见：How to Turn Off Form Autocompletion

另见：

• 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

Answer 2

使用自动完成="new-password"

很有魅力！