登录表单最佳实践
使用跨平台浏览器功能构建安全、可访问且易于使用的登录表单。
如果用户需要登录到您的站点，良好的登录表单设计至关重要。这对于那些没有可靠的网络连接、使用移动设备、匆忙或压力大的人来说尤其如此。设计不佳的登录表单会导致高跳出率。每次跳出都可能意味着失去心怀不满的用户 - 而不仅仅是错过登录机会。
以下是一个简单的登录表单示例，演示了所有最佳实践：
清单 #
- 使用有意义的 HTML 元素：
<form>、<input>、<label>和<button>。 - 使用
<label>标记每个输入。 - 使用元素属性访问内置浏览器功能：
type、name、autocomplete、required。 - 为输入
name和id属性提供稳定的值，使其在页面加载或网站部署之间不会改变。 - 将登录放在它自己的 <form> 元素中。
- 确保成功提交表单。
- 将
autocomplete="new-password"和id="new-password"用于注册表单中的输入密码，以及重置密码表单中的新密码。 - 将
autocomplete="current-password"和id="current-password"用于登录密码输入。 - 提供显示密码功能。
- 将
aria-label和aria-describedby用于密码输入。 - 不要加倍输入。
- 设计表单，使移动键盘不会妨碍输入或按钮。
- 确保表单在移动设备上可用：使用清晰的文本，并确保输入和按钮足够大以用作触摸目标。
- 在您的注册和登录页面上维护品牌和风格。
- 在现场和实验室中进行测试：在您的注册和登录流程中构建页面分析、交互分析和以用户为中心的性能测量。
- 跨浏览器和设备进行测试：跨平台的表单行为差异很大。
使用有意义的 HTML #
使用为作业构建的元素：<form>、<label> 和 <button>。这些启用内置浏览器功能，提高可访问性，并为您的标记添加含义。
使用<form> #
您可能想将输入包装在 <div> 中并纯粹使用 JavaScript 处理输入数据提交。通常最好使用普通的旧 <form> 元素。这使屏幕阅读器和其他辅助设备可以访问您的站点，启用一系列内置浏览器功能，从而使得为旧浏览器构建基本功能登录变得更简单，并且即使 JavaScript 失败也仍然可以工作。
{: #single-form }
使用<label> #
要标记输入，请使用<label> !
<label for="email">Email</label>
<input id="email" …>两个原因：
- 点击或单击标签将焦点移至其输入。通过使用标签的
for属性和输入的name或id将标签与输入相关联。 - 当标签或标签的输入获得焦点时，屏幕阅读器会宣布标签文本。
不要使用占位符作为输入标签。一旦开始输入文本，人们很可能会忘记输入的内容，尤其是当他们分心时（“我输入的是电子邮件地址、电话号码还是帐户 ID？”）。占位符还有许多其他潜在问题：如果您不相信，请参阅不要使用占位符属性和表单字段中的占位符是有害的。
最好将标签放在输入之上。这可以实现跨移动和桌面的一致设计，根据 Google AI 研究，这还可以让用户更快地进行扫描。您将获得全宽标签和输入，并且无需调整标签和输入宽度以适合标签文本。
在移动设备上打开标签位置故障，亲自查看。
使用<button> #
使用 <button> 作为按钮！按钮元素提供可访问的行为和内置表单提交功能，并且可以轻松设置样式。<div> 或其他一些伪装成按钮的元素没有意义。
确保提交按钮说明它的作用。示例包括创建帐户或登录，而不是提交或开始 。
确保成功提交表单 #
帮助密码管理员了解表单已提交。有两种方法可以做到这一点：
- 导航到不同的页面。
- 使用
History.pushState()或History.replaceState()模拟导航，并删除密码表单。
对于 XMLHttpRequest 或 fetch 请求，确保在响应中报告登录成功，并通过从 DOM 中取出表单以及向用户指示成功来处理。
考虑在用户轻触或点击登录按钮后禁用它。即使在快速响应的站点上，许多用户也会多次点击按钮。这会减慢交互速度并增加服务器负载。
相反，不要禁用等待用户输入的表单提交。例如，如果用户尚未输入其客户 PIN，请勿禁用登录按钮。用户可能会错过表单中的某些内容，然后尝试反复点击（已禁用）登录按钮并认为它不起作用。至少，如果您必须禁用表单提交，请向用户解释当他们单击禁用按钮时缺少什么。
不要加倍输入 #
某些站点会强制用户输入电子邮件或密码两次。这可能会降低少数用户的错误，但会给所有用户带来额外工作，并且增加放弃率。在浏览器自动填充电子邮件地址或建议强密码的情况下，询问两次也毫无意义。最好让用户确认他们的电子邮件地址（无论如何您都需要这样做），并让他们在必要时轻松重置密码。
充分利用元素属性 #
这是魔法真正发生的地方！浏览器有多个有用的内置功能，这些功能使用输入元素属性。
将密码保密——但允许用户在需要时查看它们 #
密码输入应该有 type="password" 来隐藏密码文本并帮助浏览器理解输入的是密码。（请注意，浏览器使用各种技术来理解输入角色并决定是否提供保存密码。）
您应该添加显示密码图标或按钮，让用户能够检查他们输入的文本——并且不要忘记添加忘记密码链接。请参阅启用密码显示。
为移动用户提供正确的键盘 #
使用 <input type="email"> 为移动用户提供合适的键盘并启用浏览器的基本内置电子邮件地址验证……无需 JavaScript！
如果您需要使用电话号码而非电子邮件地址，<input type="tel"> 可在移动设备上启用电话键盘。您还可以在必要时使用 inputmode 属性：inputmode="numeric" 非常适合 PIN 码。您想知道的关于输入模式的一切都有更多的细节。
防止移动键盘遮挡登录按钮 #
不幸的是，如果您不小心，移动键盘可能会覆盖您的表单，或者更糟糕的是，部分遮挡登录按钮。用户可能在意识到发生了什么之前就放弃了。
在可能的情况下，仅在登录页面顶部显示电子邮件/电话和密码输入来避免这种情况。将其他内容放在下面。
在一系列设备上测试 #
您需要针对目标受众在一系列设备上进行测试，并进行相应调整。 BrowserStack 支持在一系列真实设备和浏览器上对开源项目进行免费测试。
考虑使用两页 #
一些网站（包括亚马逊和 eBay）通过在两个页面上询问电子邮件/电话和密码来避免这个问题。这种方法还简化了体验：用户一次只负责一件事。
理想情况下，这应该使用单个 <form> 来实现。使用 JavaScript 最初仅显示电子邮件输入，然后将其隐藏并显示密码输入。如果您必须强制用户在输入电子邮件和密码之间导航到新页面，则第二页上的表单应该有一个带有电子邮件值的隐藏输入元素，以帮助密码管理器存储正确的值。Chromium 理解的密码表单样式提供了一个代码示例。
帮助用户避免重新输入数据 #
您可以帮助浏览器正确存储数据并自动填充输入，这样用户就不必记住输入电子邮件和密码值。这在移动设备上尤其重要，对于电子邮件输入至关重要，因为电子邮件的放弃率很高。
这有两个部分：
autocomplete、name、id和type属性帮助浏览器了解输入的作用，以便存储以后可用于自动填充的数据。为了允许存储数据以进行自动填充，现代浏览器还要求输入具有稳定的name或id值（不是在每次页面加载或站点部署时随机生成的），并且在带有submit按钮的 <form> 中。autocomplete属性可帮助浏览器使用存储的数据正确自动填充输入。
对于电子邮件输入，请使用 autocomplete="username" ，因为现代浏览器中的密码管理器可以识别 username。即使您应该使用 type="email"，您可能想使用 id="email" 和 name="email"。
对于密码输入，使用适当的 autocomplete 和 id 值来帮助浏览器区分新密码和当前密码。
将 autocomplete="new-password" 和 id="new-password" 用于新密码 #
- 将
autocomplete="new-password"和id="new-password"用于登录表单中的密码输入，或更改密码表单中的新密码输入。
将 autocomplete="current-password" 和 id="current-password" 用于现有密码 #
- 将
autocomplete="current-password"和id="current-password"用于登录表单中的密码输入，或者用于更改密码表单中用户旧密码的输入。这告诉浏览器您希望它使用它为站点存储的当前密码。
对于登录表单：
<input type="password" autocomplete="new-password" id="new-password" …>对于登录：
<input type="password" autocomplete="current-password" id="current-password" …>支持密码管理器 #
不同的浏览器处理电子邮件自动填充和密码建议的方式略有不同，但效果大致相同。例如，在桌面版 Safari 11 及更高版本上，会显示密码管理器，然后在可用时使用生物识别身份验证（指纹或面部识别）。
桌面版 Chrome 显示电子邮件建议、显示密码管理器并自动填充密码。
浏览器密码和自动填充系统并不简单。猜测、存储和显示值的算法没有标准化，并且因平台而异。例如，正如 Hidde de Vries 所指出的：“Firefox 的密码管理器通过配方系统补充了它的启发式方法。”
自动填充：Web 开发人员应该知道的东西，但没有更多关于使用 name 和 autocomplete 的信息。HTML 规范列出了所有 59 个可能的值。
启用浏览器建议强密码 #
现代浏览器使用启发式方法来决定何时显示密码管理器 UI 并建议使用强密码。
以下是 Safari 在桌面上的执行方式。
（自 12.0 版以来，Safari 中已提供强大的唯一密码建议。）
内置的浏览器密码生成器意味着用户和开发人员不需要弄清楚什么是“强密码”。由于浏览器可以安全地存储密码并根据需要自动填充密码，因此用户无需记住或输入密码。鼓励用户利用内置的浏览器密码生成器也意味着他们更有可能在您的网站上使用唯一的强密码，并且不太可能重复使用可能在其他地方被泄露的密码。
帮助用户避免意外丢失输入 #
将 required 属性添加到电子邮件和密码字段。现代浏览器会自动提示并为丢失的数据设置焦点。无需 JavaScript！
手指和拇指设计 #
与输入元素和按钮相关的几乎所有内容的默认浏览器大小都太小，尤其是在移动设备上。这似乎很明显，但这是许多网站上登录表单的常见问题。
确保输入和按钮足够大 #
输入和按钮的默认大小和填充在桌面上太小，在移动设备上更糟。
根据 Android 辅助功能指南，触摸屏对象的推荐目标尺寸为 7-10 毫米。 Apple 界面指南建议 48x48 像素，W3C 建议至少 44x44 CSS 像素。在此基础上，为移动设备的输入元素和按钮添加（至少）大约 15 像素的内边距，在桌面设备上添加大约 10 像素的内边距。用真正的移动设备和真正的手指或拇指试试这个。您应该能够轻松点击每个输入和按钮。
点击目标的大小不合适Lighthouse 审计可以帮助您自动化检测太小的输入元素的过程。
拇指设计 #
搜索触摸目标，您会看到很多食指的图片。然而，在现实世界中，许多人使用拇指与手机进行交互。拇指比食指大，控制不太精确。重要的是要保证足够大小的触摸目标。
使文本足够大 #
与大小和填充一样，输入元素和按钮的默认浏览器字体大小太小，尤其是在移动设备上。
不同平台上的浏览器字体大小不同，因此很难指定在任何地方都能正常工作的特定字体大小。对流行网站的快速调查显示桌面上的大小为 13-16 像素：匹配该物理大小是移动文本的最佳最小值。
这意味着您需要在移动设备上使用更大的像素尺寸：16px 的大小在 Chrome 桌面上是相当清晰的，但即使有良好的视力，在 Chrome for Android 上也难以阅读 16px 的文本。您可以使用媒体查询为不同的视口大小设置不同的字体像素大小。20px 在移动设备上是正确的——但您应该和视力不好的朋友或同事一起测试一下。
文档没有使用清晰的字体大小 Lighthouse 审计可以帮助您自动化检测太小文本的过程。
在输入之间提供足够的空间 #
添加足够的空间以使输入作为触摸目标工作良好。换句话说，瞄准大约手指宽度的空间。
确保您的输入清晰可见 #
输入的默认边框样式使它们难以看到。它们在某些平台（例如 Android 版 Chrome）上几乎不可见。
除了填充，添加边框：在白色背景上，一个好的规则是使用 #ccc 或更暗的边框。
使用内置浏览器功能警告无效的输入值 #
浏览器具有内置功能，可以对具有 type 属性的输入进行基本的表单验证。当您提交具有无效值的表单时，浏览器会发出警告，并将焦点设置在有问题的输入上。
您可以使用 :invalid CSS 选择器来突出显示无效数据。使用 :not(:placeholder-shown) 避免选择没有内容的输入。
input[type=email]:not(:placeholder-shown):invalid {
color: red;
outline-color: red;
}尝试不同的方法来突出显示具有无效值的输入。
必要时使用 JavaScript #
切换密码显示 #
您应该添加显示密码图标或按钮，使用户能够检查他们输入的文本。当用户看不到他们输入的文本时，可用性会受到影响。目前没有内置的方法可以做到这一点，但有实施计划。您需要改用 JavaScript。
以下代码使用文本按钮添加显示密码功能。
HTML：
<section>
<label for="password">Password</label>
<button id="toggle-password" type="button" aria-label="Show password as plain text. Warning: this will display your password on the screen.">Show password</button>
<input id="password" name="password" type="password" autocomplete="current-password" required>
</section>这是使按钮看起来像纯文本的 CSS：
button#toggle-password {
background: none;
border: none;
cursor: pointer;
/* Media query isn't shown here. */
font-size: var(--mobile-font-size);
font-weight: 300;
padding: 0;
/* Display at the top right of the container */
position: absolute;
top: 0;
right: 0;
}以及用于显示密码的 JavaScript：
const passwordInput = document.getElementById('password');
const togglePasswordButton = document.getElementById('toggle-password');
togglePasswordButton.addEventListener('click', togglePassword);
function togglePassword() {
if (passwordInput.type === 'password') {
passwordInput.type = 'text';
togglePasswordButton.textContent = 'Hide password';
togglePasswordButton.setAttribute('aria-label',
'Hide password.');
} else {
passwordInput.type = 'password';
togglePasswordButton.textContent = 'Show password';
togglePasswordButton.setAttribute('aria-label',
'Show password as plain text. ' +
'Warning: this will display your password on the screen.');
}
}这是最终结果：
使密码输入可访问 #
使用 aria-writtenby 通过为其提供描述约束的元素的 ID 来概述密码规则。屏幕阅读器提供标签文本、输入类型（密码）和描述。
<input type="password" aria-describedby="password-constraints" …>
<div id="password-constraints">Eight or more characters with a mix of letters, numbers and symbols.</div>添加显示密码功能时，请确保包含 aria-label 以警告将显示密码。否则用户可能会无意中泄露密码。
<button id="toggle-password"
aria-label="Show password as plain text.
Warning: this will display your password on the screen.">
Show password
</button>您可以在以下故障中看到两个 ARIA 功能的运行情况：
创建可访问表单提供了更多帮助表单可访问的提示。
实时和提交前验证 #
HTML 表单元素和属性具有用于基本验证的内置功能，但您还应该使用 JavaScript 在用户输入数据和尝试提交表单时进行更可靠的验证。
登录表单代码实验室的第 5 步使用Constraint Validation API （得到广泛支持）添加自定义验证，使用内置浏览器 UI 设置焦点和显示提示。
了解更多：使用 JavaScript 进行更复杂的实时验证。
分析和 RUM #
“如果无法测量，则无法改进”对于注册和登录表单尤其如此。您需要设定目标、成功测量、改进您的网站——不断重复。
折扣可用性测试有助于尝试更改，但您需要真实世界的数据才能真正了解您的用户如何体验您的注册和登录表单：
- 页面分析：注册和登录页面浏览量、跳出率和退出。
- 交互分析：目标渠道（用户在哪里放弃您的登录或登录流程？）和事件（用户在与您的表单交互时采取什么操作？）
- 网站性能：以用户为中心的指标（您的注册和登录表单是否由于某种原因变慢，如果是，原因是什么？）。
您可能还需要考虑实施 A/B 测试以尝试不同的注册和登录方法，并在向所有用户发布更改之前分阶段部署以验证对部分用户的更改。
一般准则 #
精心设计的 UI 和 UX 可以减少登录表单的放弃：
- 不要让用户寻找登录！在页面顶部放置一个指向登录表单的链接，使用易于理解的措辞，例如登录、创建帐户或注册。
- 保持专注！注册表单不是用优惠和其他网站功能分散人们注意力的地方。
- 最大限度地减少注册的复杂性。仅当用户看到提供这些数据的明显好处时才收集其他用户数据（例如地址或信用卡详细信息）。
- 在用户开始使用您的注册表单之前，请明确价值主张是什么。他们如何从登录中受益？为用户提供具体的激励以完成注册。
- 如果可能，允许用户使用手机号码而不是电子邮件地址来标识自己，因为有些用户可能不使用电子邮件。
- 使用户可以轻松重置密码，将**忘记密码？**链接放在显眼的位置。
- 链接到您的服务条款和隐私政策文件：从一开始就向用户说明您如何保护他们的数据。
- 在您的注册和登录页面上包含您公司或组织的徽标和名称，并确保语言、字体和样式与您网站的其余部分相匹配。某些表单与其他内容不属于同一站点，尤其是当它们具有明显不同的 URL 时。
继续学习 #
照片：Meghan Schiereck；来源：Unsplash