使用跨平台浏览器功能构建安全、易用且易于访问的登录表单。
如果用户需要登录您的网站，那么良好的登录表单设计至关重要。对于网络连接不佳、使用移动设备、时间紧迫或压力较大的用户来说，尤其如此。设计不佳的登录表单会导致跳出率居高不下。每次跳出都可能意味着失去一位客户和一位不满的用户，而不仅仅是错失一次登录机会。
如何实现
下面列出了构建成功登录表单的最重要准则。
使用有意义且有效的 HTML
充分利用专为创建表单而设计的元素和属性：
<form>、<input>、<label>和<button>type、autocomplete和inputmode
这些元素可启用内置浏览器功能、提高无障碍性，并为标记添加含义。
使用 <label> 元素为用于输入数据的表单字段添加标签
如需为 <input>、<select> 或 <textarea> 添加标签，请使用 <label>。通过为标签的 for 属性指定与输入的 id 相同的值，将标签与输入相关联。
充分利用 HTML 属性
使用适当的 <input> 元素 <type> 属性，在移动设备上提供合适的键盘，并启用浏览器的基本内置验证功能，让用户可以轻松输入数据。
请始终使用 type="email" 表示电子邮件地址，使用 type="tel" 表示电话号码。
每个 <input>、<select> 和 <textarea> 元素都应具有适当的 autocomplete 属性，以提高无障碍性并帮助用户避免重新输入数据。
用户名和电子邮件输入框中包含的是标识符，而不是文字。添加 spellcheck="false"，这样浏览器就不会将其重写为与账号不匹配的内容。autocorrect 和 autocapitalize 始终对 input type="email" 停用，但对于非电子邮件用户名是必需的。
让按钮发挥作用
使用 <button> 表示按钮。您也可以使用 <input type="submit">，但不要使用 div 或其他一些随机元素作为按钮。按钮元素提供无障碍行为、内置表单提交功能，并且可以轻松设置样式。
为每个表单提交按钮指定一个值，用于说明其功能。使用清晰、易于识别的标签。例如，使用登录，而不是继续或提交。
尽可能使用单个名称输入
允许用户使用单个输入框输入姓名，除非您有充分的理由单独存储名字、姓氏、敬称或其他姓名部分。使用单个姓名输入框可降低表单的复杂性，支持剪切和粘贴，并使自动填充更简单。
允许使用国际名称。进行验证时，请避免使用仅匹配拉丁字符的正则表达式。“仅限拉丁字符”会排除姓名或地址中包含非拉丁字母字符的用户。而是应允许 Unicode 字母匹配，并确保您的后端安全地支持 Unicode 作为输入和输出。现代浏览器对正则表达式中的 Unicode 提供了良好的支持。
显示登录进度
对于登录过程中的每个步骤，请使用网页标题和描述性按钮值，以便用户清楚地了解现在需要做什么以及下一步是什么。
在表单输入中使用 enterkeyhint 属性，以设置移动键盘 Enter 键标签。例如，在多页表单中使用 enterkeyhint="previous" 和 enterkeyhint="next"，在表单的最终输入中使用 enterkeyhint="done"，在搜索输入中使用 enterkeyhint="search"。
帮助用户避免重新输入登录数据
请务必在登录表单中添加适当的 autocomplete 值。
这样，浏览器就可以安全地存储登录详细信息并正确输入表单数据，从而为用户提供帮助。如果没有自动填充功能，用户可能更倾向于以实体形式记录登录详细信息，或在设备上以不安全的方式存储登录数据。
仔细验证
在实时输入和表单提交前验证数据输入。对电子邮件输入使用 type="email"，浏览器会自动验证格式。向必填字段添加 required 属性，以防止提交空内容。
将登录功能放在其自己的 <form> 元素中
在让用户输入数据时，请始终使用 <form> 元素
请勿将输入内容封装在 <div> 中，而应完全使用 JavaScript 处理输入数据提交。通常最好使用 <form> 元素。这样，屏幕阅读器和其他辅助设备就可以访问您的网站，启用一系列内置浏览器功能，更轻松地为旧版浏览器构建基本功能登录，并且即使 JavaScript 失败，也可以正常运行。
请勿重复输入
有些网站会强制要求用户输入两次邮箱或密码。这可能会减少少数用户的错误，但会给所有用户带来额外的工作量，并提高放弃率。在浏览器自动填充邮箱或建议安全系数高的密码时，要求用户输入两次密码也没有意义。最好让用户能够确认其邮箱（无论如何您都需要这样做），并让他们在必要时能够轻松重置密码。
确保密码不公开，但允许用户在需要时查看密码
密码输入框应具有 type="password"，以隐藏密码文本并帮助浏览器了解该输入框用于输入密码。（请注意，浏览器会使用各种技术来了解输入角色，并决定是否提供保存密码的选项。）
您应添加显示密码切换开关，以便用户检查输入的文本，并且不要忘记添加忘记密码链接。
为移动用户提供合适的键盘
使用 <input type="email"> 为移动用户提供合适的键盘，并让浏览器执行基本的内置电子邮件地址验证，无需使用 JavaScript！
如果您需要使用电话号码而不是电子邮件地址，<input type="tel"> 会在移动设备上启用电话键盘。您还可以在必要时使用 inputmode 属性：inputmode="numeric" 非常适合 PIN 码。
防止移动键盘遮挡“登录”按钮
如果您不小心，移动键盘可能会遮挡表单，更糟糕的是，可能会部分遮挡“登录”按钮。用户可能会在意识到发生了什么之前就放弃了。
请尽可能避免这种情况，方法是在登录页面顶部仅显示电子邮件地址（或电话号码）和密码输入框以及“登录”按钮。将其他内容放在下方。
帮助用户避免重新输入数据
您可以帮助浏览器正确存储数据并自动填充输入内容，这样用户就无需记住并输入电子邮件地址和密码值。这在移动设备上尤为重要，对于电子邮件输入更是至关重要，因为电子邮件输入会导致较高的放弃率。这涉及两个方面：
autocomplete、name、id和type属性可帮助浏览器了解输入内容的作用，以便存储日后可用于自动填充的数据。为了允许存储数据以供自动填充，现代浏览器还要求输入具有稳定的name或id值（而不是在每次网页加载或网站部署时随机生成），并且位于带有submit按钮的<form>元素中。autocomplete属性可帮助浏览器使用存储的数据正确自动填充输入内容。
对于电子邮件输入，请使用 autocomplete="username"，因为现代浏览器中的密码管理工具可以识别 username，即使您应该使用 type="email"，并且可能希望使用 id="email" 和 name="email"。对于密码输入，请使用适当的 autocomplete 值，以帮助浏览器区分新密码和当前密码。
为现有密码使用 autocomplete="current-password"
强制性：在登录表单中，使用 autocomplete="current-password" 输入密码。这会告知浏览器，您希望它使用其为该网站存储的当前密码。
对于登录表单：
<input type="password" autocomplete="current-password" id="current-password" …>
允许浏览器建议安全系数高的密码
现代浏览器会使用启发法来决定何时显示密码管理工具界面并建议安全系数高的密码。
内置的浏览器密码生成器意味着用户和开发者无需费心思考什么是“安全系数高的密码”。由于浏览器可以安全地存储密码并根据需要自动填充密码，因此用户无需记住或输入密码。鼓励用户使用内置的浏览器密码生成器，也意味着他们更有可能在您的网站上使用安全系数高的唯一密码，并且不太可能重复使用可能在其他地方被盗的密码。
帮助用户避免意外漏掉输入
强制性：向电子邮件和密码字段添加 required 属性。现代浏览器会自动提示并聚焦于缺失的数据。
<input type="email" id="email" name="email" autocomplete="username" required>
<input type="password" id="password" name="password" autocomplete="current-password" required>
允许粘贴密码
某些网站不允许将文本粘贴到密码输入框中。
禁止粘贴密码会给用户带来不便，导致用户使用易于记忆的密码（因此可能更容易被破解），并且根据英国国家网络安全中心等组织的说法，这实际上可能会降低安全性。用户只有在尝试粘贴密码后，才会意识到不允许粘贴，因此不允许粘贴密码并不能避免剪贴板漏洞。
后备策略
自动填充是一项渐进增强功能。在不支持自动填充功能的浏览器中，用户只需手动输入登录凭据即可。语义 HTML 限制（例如 type、inputmode 和 required）仍会正常运行，以验证用户输入并提供正确的虚拟键盘。