自动完成=new-password并通过再次输入密码进行确认

Question

HTML5现在为autocomplete属性引入了一些新的属性值，以帮助用户代理自动填充表单。其中一个新值new-password用于告诉用户代理输入一个新密码，而不是用户的当前密码。

然而，我不清楚如何正确地告诉它在将新密码输入两次作为确认时为两个字段生成相同的密码？也许可以在这两个输入框上使用相同的自定义section-*前缀，例如autocomplete="new-password section-my-new-pw"？规范提到section-*前缀会影响自动填充范围，但对我的情况并没有太具体的解释。

以下是一个示例表单，我想象中许多网站将很快使用这种表单 - 它区分了current-password和new-password，并要求用户确认新密码。

<form>
    <p>Username             <input type="text"     autocomplete="username"         name="username"></p>
    <p>Current Password     <input type="password" autocomplete="current-password" name="current-password"></p>
    <p>New Password         <input type="password" autocomplete="new-password"     name="new-password"></p>
    <p>Confirm New Password <input type="password" autocomplete="new-password"     name="confirm-new-password"></p>
</form>

我更喜欢答案引用文档，而不是关于当前浏览器或扩展程序行为的观察。

- goat

---

你不应该在段落内使用输入。 - undefined

@undefined 为什么不行呢？我已经在很多有信誉的来源的例子中看到这种做法多年了，比如 whatwg.org 和 mozilla。 - goat

我认为这已经过时了。段落通常用于文本，将它们用作容器可能会导致排版样式方面的问题，特别是间距方面。<div> 通常更适合用作容器。 - undefined

<p>中的输入与未标记的输入相比还可以，但示例应该使用<label>元素。</p> - Robin Métral

Answer 1

只需在确认输入框中使用 autocomplete="new-password"。如果选择在密码输入框中生成新密码，则确认输入框会立即填充相同的值。已在 Chrome 中测试。

参考资料：

1. Chrome 建议
2. HTML 标准讨论

- Marvin

---

参考链接比这个答案更清晰明了。基本上，你应该在新密码和确认密码字段上都使用 new-password 属性。 - sonyisda1

也适用于Firefox浏览器。 - Skoua

与 Chrome 不同，Firefox 会使第一个 <input type="password" autocomplete="new-password"> 的文本可见，这样你就可以复制密码，直到 input 失去焦点。 - s3c

@s3c 哈哈，作为一个从事网络开发近10年的人，你的评论让我意识到为什么它被称为“模糊”。就像模糊的图像和清晰的图像之间的区别一样... - undefined

@Arthur_J 是的，这是一个巧妙的比喻，尽管不是非常清晰的一个 :) - undefined