有关登录表单的最佳做法

使用跨平台浏览器功能构建安全、易用且易于访问的登录表单。

Sam Dutton

如果用户需要登录您的网站，那么良好的登录表单设计至关重要。对于网络连接不佳、使用移动设备、时间紧迫或压力较大的用户来说，情况尤其如此。设计不佳的登录表单会导致跳出率居高不下。 每次跳出都可能意味着失去一位不满的用户，而不仅仅是错失一次登录机会。

以下是一个简单的登录表单示例，其中展示了所有最佳实践：

核对清单

• 使用有意义的 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 失败，也可以正常运行。

使用 <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 码。您想了解的关于 inputmode 的一切提供了更多详细信息。

防止移动键盘遮挡登录按钮

遗憾的是，如果您不小心，移动键盘可能会遮挡表单，更糟糕的是，可能会部分遮挡登录按钮。用户可能还没弄清楚发生了什么 就放弃了

为避免这种情况，请尽可能在登录页面顶部仅显示电子邮件地址（或电话号码）和密码输入框以及登录按钮。将其他内容放在下方。

在各种设备上测试

您需要针对目标受众群体在各种设备上进行测试，并相应地进行调整。BrowserStack 支持在一系列真实设备和浏览器上免费测试开源项目。

考虑使用两个页面

有些网站（包括 Amazon 和 eBay）通过在两个页面上分别要求输入电子邮件地址（或电话号码）和密码来避免此问题。这种方法还简化了体验：用户一次只需完成一项任务。

理想情况下，这应该通过单个 <form> 来实现。使用 JavaScript 最初仅显示电子邮件输入框，然后将其隐藏并显示密码输入框。 如果您必须强制用户在输入邮箱和密码之间跳转到新页面，则第二个页面上的表单应包含一个带有邮箱值的隐藏输入元素，以帮助密码管理工具存储正确的值。Chromium 可理解的密码表单样式提供了一个代码示例。

帮助用户避免重新输入数据

您可以帮助浏览器正确存储数据并自动填充输入内容，这样用户就不必记住输入电子邮件地址和密码值。这在移动设备上尤为重要，对于电子邮件输入更是至关重要，因为电子邮件输入会产生较高的放弃率。

这涉及两个方面：

1. autocomplete、name、id 和 type 属性可帮助浏览器了解输入内容的作用，以便存储日后可用于自动填充的数据。 为了允许存储数据以供自动填充，现代浏览器还要求输入具有稳定的 name 或 id 值（而不是在每次网页加载或网站部署时随机生成），并且位于带有 submit 按钮的 <form> 中。

2. 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 个可能的值。

允许浏览器建议安全系数高的密码

现代浏览器会使用启发法来决定何时显示密码管理工具界面并建议安全系数高的密码。

以下是 Safari 在桌面设备上的做法。

（自 12.0 版起，Safari 已提供安全系数高且独一无二的密码建议。）

内置浏览器密码生成器意味着用户和开发者无需弄清楚什么是“安全系数高的密码”。由于浏览器可以安全地存储密码并根据需要自动填充密码，因此用户无需记住或输入密码。鼓励用户利用内置的浏览器密码生成器，也意味着他们更有可能在您的网站上使用安全系数高的唯一密码，并且不太可能重复使用可能在其他地方泄露的密码。

帮助用户避免意外漏掉输入

将 required 属性添加到电子邮件和密码字段。 现代浏览器会自动提示并聚焦于缺失的数据。 无需 JavaScript！

专为手指和拇指而设计

几乎所有与输入元素和按钮相关的默认浏览器尺寸都太小，尤其是在移动设备上。这似乎显而易见，但却是许多网站上的登录表单中常见的问题。

确保输入框和按钮足够大

输入和按钮的默认大小和内边距在桌面设备上太小，在移动设备上更小。

根据 Android 无障碍指南，建议的触摸屏对象目标尺寸为 7-10 毫米。Apple 界面指南建议为 48x48 像素，W3C 建议至少为 44x44 CSS 像素。在此基础上，为移动设备上的输入元素和按钮添加（至少）约 15 像素的内边距，在桌面设备上添加约 10 像素的内边距。请使用真实的移动设备和真实的手指或拇指进行测试。您应该能够轻松点按每个输入框和按钮。

点按目标的大小不合适 Lighthouse 审核可帮助您自动检测过小的输入元素。

设计时考虑拇指操作

搜索触摸目标，您会看到许多食指图片。然而，在现实世界中，许多人使用拇指与手机互动。拇指比食指大，控制起来不太精准。因此，触摸目标的大小必须足够大。

确保文字足够大

与尺寸和内边距一样，输入元素和按钮的默认浏览器字体大小太小，尤其是在移动设备上。

不同平台上的浏览器对字体大小的处理方式不同，因此很难指定一个在所有平台上都能正常显示的特定字体大小。对热门网站的快速调查显示，桌面设备上的文字大小为 13-16 像素：与该物理大小相匹配是移动设备上文字的理想最小大小。

这意味着您需要在移动设备上使用更大的像素尺寸：在桌面版 Chrome 上，16px 的文字非常清晰，但即使视力良好，也很难在 Android 版 Chrome 上阅读 16px 的文字。您可以使用媒体查询为不同的视口尺寸设置不同的字体像素大小。 20px 在移动设备上比较合适，但您应该与低视力的朋友或同事一起测试。

文档未使用清晰易读的字体大小 Lighthouse 审核可帮助您自动检测过小的文本。

在输入内容之间留出足够的空间

添加足够的边距，使输入框能够作为触摸目标正常工作。换句话说，请留出大约一指宽的边距。

确保输入内容清晰可见

输入的默认边框样式使其难以看清。在某些平台（例如 Chrome for Android）上，它们几乎不可见。

除了内边距之外，还要添加边框：在白色背景上，一个很好的通用规则是使用 #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-describedby 概述密码规则，方法是为其提供描述限制条件的元素的 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 在用户输入数据和尝试提交表单时进行更可靠的验证。

登录表单 Codelab 的第 5 步使用 Constraint Validation API（广泛受支持），通过内置浏览器界面添加自定义验证，以设置焦点和显示提示。

如需了解详情，请参阅使用 JavaScript 进行更复杂的实时验证。

分析和 RUM

“无法衡量，就无法改进”这句话对于注册和登录表单来说尤其适用。您需要设定目标、衡量成效、改进网站，并不断重复这一过程。

折扣易用性测试有助于尝试更改，但您需要真实数据才能真正了解用户如何体验注册和登录表单：

• 网页分析：注册和登录网页浏览量、跳出率和退出率。
• 互动分析：目标漏斗（用户在哪个环节放弃了登录或注册流程？）和事件（用户在与表单互动时执行了哪些操作？）
• 网站性能：以用户为中心的指标（您的注册和登录表单是否由于某种原因而运行缓慢？如果是，原因是什么？）。

您可能还需要考虑实施 A/B 测试，以尝试不同的注册和登录方法，并采用分阶段发布的方式，先在一部分用户中验证更改，然后再向所有用户发布更改。

一般准则

精心设计的界面和用户体验可以减少登录表单放弃率：

• 不要让用户费力寻找登录入口！在页面顶部放置一个指向登录表单的链接，并使用易于理解的措辞，例如登录、创建账号或注册。
• 保持专注！注册表单不应包含优惠和其他网站功能，以免分散用户的注意力。
• 尽可能降低注册流程的复杂性。仅在用户能从提供其他用户数据（例如地址或信用卡详细信息）中获得明显好处时，才收集这些数据。
• 在用户开始填写注册表单之前，请明确说明价值主张。登录对他们有什么好处？为用户提供具体的激励措施，促使其完成注册。
• 如果可能，请允许用户使用手机号码（而非邮箱）来标识自己的身份，因为有些用户可能不使用邮箱。
• 让用户可以轻松重置密码，并使忘记密码？链接清晰可见。
• 提供服务条款和隐私权政策文档的链接：从一开始就向用户明确说明您如何保护他们的数据。
• 在注册和登录页面上添加公司或组织的徽标和名称，并确保语言、字体和样式与网站的其他部分一致。有些表单看起来不像是与其他内容属于同一网站，尤其是当它们的网址明显不同时。

继续学习

• 创建出色的表单
• 移动表单设计最佳实践
• 功能更强大的表单控件
• 创建无障碍表单
• 使用 Credential Management API 简化登录流程
• 使用 WebOTP API 在网页上验证电话号码