帮助用户注册
注册表单通常是用户与您网站上的表单进行的首次互动。 良好的注册表单设计至关重要，而安全的表单必不可少。
查看注册表单，了解如何帮助用户在您的网站上注册。
保持注册表单的简洁性，仅显示创建账号所需的表单控件。不要重复使用表单控件，以帮助用户正确填写账号详细信息。改为发送确认电子邮件。
账号详细信息
您可以使用适当的 autocomplete 属性来帮助用户填写账号详细信息。电子邮件字段使用 autocomplete="email"，新密码字段使用 autocomplete="new-password"。
详细了解如何自动填充输入控件。
您还可以通过提供显示密码 <button> 来帮助用户输入安全密码。详细了解显示密码模式。
确保订阅表单安全无虞
不以纯文本形式存储或传输密码。 请务必对密码进行加盐和哈希处理，并且不要尝试自行设计哈希算法。
提供多重身份验证，尤其是在您存储个人数据或敏感数据的情况下。 短信动态密码最佳实践和使用 WebAuthn 启用强身份验证介绍了如何实现多重身份验证。
确保用户不使用已泄露的密码。例如，使用 Have I Been Pwned 中的 API 检测已泄露的密码，并建议用户填写其他新密码，或者在用户密码泄露时向其发出警告。
帮助用户登录
了解如何构建登录表单，确保用户可以登录您的网站。
让注册和登录按钮的位置清晰可见。 确保表单可在触控设备上使用：
- 按钮的点按目标大小至少为 48 像素。
- 表单元素的
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 网址。