帮助用户注册
注册表单通常是用户与您网站上表单的首次互动。良好的注册表单设计至关重要，安全的表单更是必不可少。
让我们看看注册表单，以及您如何帮助用户在您的网站上注册。
保持注册表单的简洁性，仅显示创建帐户所需的表单控件。不要重复使用表单控件来帮助用户正确填写帐户详细信息。改为发送确认电子邮件。
帮助用户填写帐户详细信息
您可以通过使用适当的 autocomplete 属性来帮助用户填写帐户详细信息。对于电子邮件字段，使用 autocomplete="email"，对于新密码字段，使用 autocomplete="new-password"。
了解更多关于自动填充输入控件的信息。
您还可以通过提供显示密码 <button> 来帮助用户输入安全密码。
了解更多关于显示密码模式的信息。
确保您的注册表单安全
永远不要以明文形式存储或传输密码。确保对密码进行加盐和哈希处理——并且不要试图发明自己的哈希算法。
提供多因素身份验证，尤其是在您存储个人或敏感数据的情况下。短信 OTP 最佳实践和使用 WebAuthn 启用强身份验证解释了如何实现多因素身份验证。
确保用户不使用泄露的密码。例如，使用 Have I Been Pwned 的 API 来检测泄露的密码，并建议您的用户填写不同的新密码，或者在他们的密码泄露时警告他们。
帮助用户登录
让我们看看如何构建一个登录表单，以确保用户可以轻松登录您的网站。
使注册和登录按钮的位置显而易见。确保您的表单可在触摸设备上使用
- 按钮的点击目标大小至少为 48px。
- 您的表单元素的
font-size足够大（在移动设备上20px左右是合适的）。 - 表单控件之间有足够的空间 (
margin)，并且输入足够大（在移动设备上至少使用padding: 15px）。
帮助用户填写他们的电子邮件和密码
帮助浏览器和密码管理器自动填充帐户详细信息。对于电子邮件字段，使用 autocomplete="email"，对于当前密码字段，使用 autocomplete="current-password"。
为了帮助用户手动填写他们的帐户详细信息，对于电子邮件字段，使用 type="email" 以在移动设备上显示适当的屏幕键盘。
对您的电子邮件和密码字段使用 required 属性，以便您可以在用户提交表单时警告无效值。考虑使用实时验证来帮助用户在输入无效数据后立即更正，而不是等待表单提交。
确保用户可以看到他们输入的密码
您为 <input type="password"> 填写的文本默认情况下是模糊的，以尊重用户的隐私。通过显示一个 <button> 来切换输入文本的可见性，帮助用户输入他们的密码。
了解更多关于实现显示密码 <button>的信息。
确保您的登录和注册表单可用
定期与真人一起测试您的登录和注册表单，以确保身份验证按预期工作。使用分析和真实用户测量 (RUM) 来收集现场数据，并使用 Lighthouse 和 PageSpeed Insights 等工具自行运行测试。了解更多关于可用性测试和收集分析数据的信息。
确保您的表单在不同的浏览器和不同的平台上工作。在不同的屏幕尺寸上，仅使用键盘或使用屏幕阅读器（如 Mac 上的 VoiceOver 或 Windows 上的 NVDA）测试您的表单。
帮助用户更改他们的帐户设置
确保用户可以更改每个帐户设置，包括电子邮件地址、密码和用户名。
透明地说明您正在存储哪些数据，并帮助用户随时下载他们所有的个人数据。确保用户可以在他们想要的情况下删除他们的帐户。诸如此类的帐户管理功能在某些地区可能是法律要求。
确保用户可以更新他们的密码
让用户轻松更新他们的密码。
在更改密码之前询问用户当前密码，并发送一封关于密码更改的电子邮件，其中包含恢复和锁定帐户的选项。
添加请求新密码的选项，并考虑提供一个 .well-known URL 用于请求新密码。