有关登录表单的最佳做法

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

Sam Dutton

如果用户需要登录您的网站，那么设计良好的登录表单 关键。对于网络状况不佳、使用移动设备或 时间紧迫或压力很大如果登录表单设计不佳，其跳出率会很高。 每次跳出都可能意味着用户流失和心怀不满，而不只是错过登录 优化建议。

试试看 ：如果您希望通过实操教程了解这些最佳实践，请查看“登录表单最佳实践”Codelab。

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

核对清单

• 使用有意义的 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： 密码输入。
• 不要重复输入。
• 设计表单，确保手机键盘不会遮挡输入或 按钮。
• 确保表单在移动设备上易于使用：使用清晰可辨的文字 并确保输入和按钮足够大，可以用作触摸目标。
• 在注册和登录页上保持品牌形象和风格。
• 在实际工作和实验室中进行测试：构建网页分析数据、 互动分析，以及以用户为中心的效果衡量解决方案， 注册和登录流程。
• 针对各种浏览器和设备进行测试：表单行为有所不同 效果显著提升

。

注意 ：本文介绍的是前端最佳实践。文中并未介绍如何构建后端服务以对用户进行身份验证、存储凭据或管理其账号。用户账号、授权和密码管理的 12 项最佳做法概述了运行您自己的后端的核心原则。如果您的用户遍布世界各地，您需要考虑将自己网站对第三方身份服务的使用及内容进行本地化。此外，还有两种相对较新的 API（本文未介绍它们），可帮助您打造更好的登录体验：* WebOTP：用于通过短信向手机提供一次性密码或 PIN 码。这样一来，用户便可选择电话号码作为标识符（无需输入电子邮件地址！），还可实现用于登录的两步验证和用于确认付款的一次性验证码。* 凭据管理：可让开发者以编程方式存储和检索密码凭据和联合凭据。

使用有意义的 HTML

使用为该作业构建的元素：<form>、<label> 和 <button>。这些方法使 内置浏览器功能，改进无障碍功能，并让 标记。

使用 <form>

您可能想要将输入封装在 <div> 中并处理输入数据 能够完全通过 JavaScript 提交。一般来说，最好使用 <form> 元素。这样，屏幕阅读器和其他辅助工具就能访问您的网站 支持一系列内置的浏览器功能， 旧版浏览器的基本功能登录，并且即使 JavaScript 失败。

一个常见的错误是将整个网页封装在单个表单中，但这样容易给浏览器密码管理器和自动填充带来问题。使用其他 <form>每个需要表单的界面组件例如，如果您在同一页面上登录和搜索，则应使用两个表单元素。

使用 <label>

如需为输入加标签，请使用 <label>！

<label for="email">Email</label>
<input id="email" …>

有两个原因：

• 点按或点击某个标签即可将焦点移至其输入位置。将标签与 标签的 for 属性与输入的 name 或 id 结合使用。
• 收到标签或标签的输入时，屏幕阅读器会读出标签文本 关注度。

请勿将占位符用作输入标签。人们容易忘记 尤其是在他们开始输入文字时， 分心（“我输入的是电子邮件地址、电话号码还是账号 ID？”）。占位符还有很多其他潜在问题：请参阅不要 使用占位符 属性和 表单字段中的占位符表示 有害行为 不确定。

最好将标签放在输入上方。这样可以确保 同时支持移动设备和桌面设备，并且根据 Google AI 研究， 让用户可以更快地进行扫描您将获得全宽标签和输入， 无需调整标签和输入宽度来适应标签文本。

<ph type="x-smartling-placeholder">

</ph>

当标签和输入宽度位于同一行时，两者的宽度会受到限制。

打开 label-position 错误信号 和移动设备进行查看。

使用 <button>

使用<button> 按钮！按钮元素提供易于访问的行为和内置表单 提交功能，而且可以轻松设置样式。进军全球市场 使用 <div> 或某个其他元素假装是按钮。

确保提交按钮可以表明其用途。例如创建账号或 登录，而不是提交或开始。

确保表单成功提交

帮助密码管理工具了解表单已提交。有两个 方法：

• 前往其他页面。
• 使用 History.pushState() 或 History.replaceState() 模拟导航， 并删除密码表单。

对于 XMLHttpRequest 或 fetch 请求，请确保登录成功 在响应中进行报告，并通过 DOM 以外的表单进行处理 以表明操作成功

考虑在用户点按或点击后停用登录按钮 。许多用户会多次点击按钮 速度快、反应灵敏的网站也不例外。这会减慢交互速度并 会增加服务器负载

反之，不要停用等待用户输入的表单提交功能。例如： 如果用户尚未输入客户信息，则请勿停用登录按钮 PIN 码。用户可能会遗漏表单中的某些信息，然后尝试反复点按 （已停用）登录按钮并认为其无法正常运行。至少，如果 您必须停用表单提交功能，并在用户 点击“已停用”按钮

注意 ：表单中的默认按钮类型为 submit。如果您想在表单中再添加一个按钮（例如显示密码），请添加 type="button"。否则，点击或点按该按钮会提交表单。在任何表单字段具有焦点时按 Enter 键可模拟对表单中的第一个 submit 按钮的点击。如果您在表单中的 Submit 按钮之前添加了一个按钮，并且未指定类型，则该按钮将采用表单的默认按钮类型 (submit)，并在提交表单之前收到点击事件。如需查看示例，请参阅我们的演示：填写表单，然后按 Enter。

不要重复输入

有些网站会强制用户输入电子邮件地址或密码两次。这可能会减少 但会造成所有用户的额外工作 放弃 费率。 如果浏览器自动填充电子邮件地址或 建议安全系数高的密码最好让用户能够确认其电子邮件地址 （无论如何您都要执行此操作），并方便他们重置自己的 密码。

充分利用元素属性

这里才真正发生了奇迹！ 浏览器具有多个使用输入元素属性的实用内置功能。

使密码保持私密状态，但允许用户在需要时查看密码

密码输入应具有 type="password"，以隐藏密码文本并帮助 浏览器会识别您输入的是密码。（请注意， 各种方法来理解输入角色并确定 是否询问是否保存密码。）

您应添加一个显示密码切换开关，以便用户检查 同时别忘了添加忘记了密码链接。请参阅 启用密码显示功能。

<ph type="x-smartling-placeholder">

</ph>

在 Google 登录表单中输入密码：带有显示密码图标和忘记了密码链接。

为移动设备用户提供合适的键盘

使用 <input type="email"> 为移动设备用户提供合适的键盘， 启用由浏览器进行的基本内置电子邮件地址验证...无 JavaScript 必填！

如果您需要使用电话号码而非电子邮件地址，<input type="tel"> 可在移动设备上启用电话键盘。您还可以使用 inputmode 属性（如有必要）：inputmode="numeric" 非常适合用于 PIN 码 数字。您想要知道的一切 inputmode 包含更多详细信息

注意 ：type="number" 会添加一个向上/向下箭头以递增数字，因此请勿将其用于不需要递增的数字，例如 ID 和账号。

防止手机键盘遮挡登录按钮

很遗憾，如果您不小心，移动键盘可能会覆盖您的表单，或者， 更糟糕的是，登录按钮会部分遮挡。用户可能会在此之前放弃 并意识到发生的事情

<ph type="x-smartling-placeholder">

</ph>

登录按钮：现在能看到，但看不到。

请尽可能在登录页顶部仅显示电子邮件地址/电话号码和密码输入框以及登录按钮，以避免出现此问题。将其他内容放在下面。

<ph type="x-smartling-placeholder">

</ph>

键盘不会遮挡登录按钮。

在一系列设备上进行测试

您需要在一系列设备上针对目标受众群体进行测试，并据此调整 。BrowserStack 提供针对开放源代码的免费测试 构建项目 和浏览器。

<ph type="x-smartling-placeholder">

</ph>

登录按钮：在 iPhone 7 和 8 上会被遮挡，但在 iPhone 11 上则不会。

考虑使用 2 个网页

有些网站（包括 Amazon 和 eBay）通过请求 电子邮件地址/电话号码和密码，分别放置在两个页面上。这种方法还简化了 体验：用户一次只能完成一项任务。

<ph type="x-smartling-placeholder">

</ph>

两阶段登录：电子邮件地址或电话号码，然后输入密码。

理想情况下，应使用单个 <form> 实现此操作。使用 JavaScript 最初仅显示电子邮件输入，然后隐藏它并显示输入的密码。 如果您必须强制用户在输入电子邮件地址和 第二页上的表单应包含一个隐藏的输入元素， email 值，以帮助密码管理工具存储正确的值。密码 Chromium 可以识别的表单样式 提供了一个代码示例。

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

您可以帮助浏览器正确存储数据并自动填充输入，这样用户就不会 请务必输入电子邮件和密码值。这一点对于 在移动设备上收集信息，这对于输入较高的放弃率的电子邮件至关重要。

这一过程分为两个部分：

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

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" …>

注意 ：Chrome 等浏览器可以使用浏览器的密码管理工具自动填充回访用户登录过程中的字段。要使这些功能生效，浏览器需要能够区分用户何时更改密码。具体而言，设置新密码后，应从页面中清除或隐藏用于更改用户密码的表单。如果更改用户密码的表单在密码更改后仍然处于未关闭状态，那么浏览器可能无法记录更新。

支持密码管理工具

不同的浏览器在一定程度上处理电子邮件自动填充和密码建议 但效果大致相同在桌面版 Safari 11 及更高版本中， 例如，系统会显示密码管理工具 以及指纹或人脸识别技术（如果有）。

<ph type="x-smartling-placeholder">

</ph>

使用自动补全功能登录 - 无需输入文字！

桌面版 Chrome 会显示电子邮件建议、密码管理工具和自动填充密码。

<ph type="x-smartling-placeholder">

</ph>

Chrome 84 中的自动补全登录流程。

浏览器密码和自动填充系统并不简单。用于实现以下目的的算法： 猜测、存储和显示值并不是标准化的，并且与 平台到平台例如，正如 Hidde de Vries： “Firefox 的密码管理器以 食谱系统。”

自动填充：Web 开发者需要了解的内容， 错误做法 详细介绍了如何使用 name 和 autocomplete。HTML 规范 列出全部 59 个可能的值。

注意 ：您可以为密码管理工具提供帮助，方法是在注册和登录表单中针对 form 元素本身以及任何 input、select 和 textarea 元素使用不同的 name 和 id 值。

允许浏览器推荐安全系数高的密码

现代浏览器使用启发法来确定何时显示密码管理器界面以及 建议一个安全系数高的密码

下面展示了 Safari 在桌面设备上的操作方法。

<ph type="x-smartling-placeholder">

</ph>

Safari 中的密码建议流程

。

（自 12.0 版起，Safari 就提供了安全系数高的唯一密码建议）。

内置的浏览器密码生成器让用户和开发者无需 确定什么是“安全系数高的密码”。由于浏览器可以安全地存储 并根据需要自动填充密码，用户无需记住 或输入密码。鼓励用户充分利用内置浏览器 密码生成器也意味着它们更有可能使用唯一且安全系数高的 并且不容易重复使用 或是在别处遭到入侵

注意 ：这种方法的缺点是无法跨平台共享密码。例如，用户可能会在 iPhone 上使用 Safari，而在 Windows 笔记本电脑上使用 Chrome。

帮助用户避免意外丢失输入内容

将 required 属性同时添加到电子邮件地址和密码字段。 现代浏览器会针对缺失的数据自动提示并设置焦点。 无需 JavaScript！

<ph type="x-smartling-placeholder">

</ph> <ph type="x-smartling-placeholder">

</ph> 在桌面版 Firefox（版本 76）上提示并聚焦于丢失数据 和 Chrome（Android 版）（版本 83）。

专为手指和拇指设计

与输入元素相关的几乎所有内容的默认浏览器大小 按钮太小，尤其是在移动设备上。这个过程看似显而易见， 是许多网站上登录表单的常见问题

确保输入和按钮足够大

在桌面设备上，输入源和按钮的默认尺寸和内边距过小， 结果会更差

根据 Android 无障碍功能 指南 建议的触摸屏对象尺寸为 7–10 毫米。Apple 界面 指南建议的尺寸为 48x48 像素，而 W3C 建议采用至少 44x44 像素的 CSS 像素。关于 为输入元素和按钮添加（至少）15px 的内边距， 在移动设备上为 10 px 左右，在桌面设备上为 10 px 左右在真实的移动设备上试用此功能 真正的手指或拇指。您应该可以轻松地点按每个 输入和按钮。

点按目标的大小不合适 Lighthouse 审核可以帮助您自动执行检测输入元素的过程 资源太小

专为触摸操作而设计

搜索触摸目标并 你会看到很多食指图片。然而，在现实世界中 人会使用拇指与手机互动。大拇指大于 使用食指，控制不够精确。充分理由 大小的触摸目标。

让文字足够大

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

<ph type="x-smartling-placeholder">

</ph>

桌面设备和移动设备上的默认样式：输入的文字过小，导致许多用户无法辨认。

不同平台上的浏览器调整字号的方式不同，因此很难 指定在任何环境中都能正常显示的特定字体大小。关于以下内容的简短调查： 热门网站在桌面设备上显示的尺寸为 13–16 像素：与实际尺寸一致 是适用于移动设备的文字广告的最低要求

这意味着，您需要在移动设备上使用较大的像素尺寸：在 Chrome 上使用 16px 16px Chrome 浏览器（Android 版）上的文字。您可以为不同的字体设置不同的像素大小 使用媒体 查询。 “20px”适合在移动设备上使用，但建议您和朋友一起测试一下，也可以 帮助低视力用户提高工作效率

文档未使用清晰可辨的字体大小 Lighthouse 审核功能可帮助您自动执行相关流程，以检测 小。

在输入内容之间提供足够的空间

应添加足够的外边距，以确保输入在触摸目标上能够正常发挥作用。换言之，就是要瞄准 约为手指宽度的外边距

请确保输入内容清晰可见

输入内容的默认边框样式使其很难看到。它们即将 在某些平台上不可见，例如 Chrome（Android 版）。

除了添加内边距外，还要添加边框：在白色背景上，一般来说最好是 以使用 #ccc 或更暗的颜色。

<ph type="x-smartling-placeholder">

</ph>

文本清晰可辨、输入边框可见、留有适当的内边距和外边距。

使用内置的浏览器功能在输入值无效时发出警告

浏览器具有内置功能，可使用 type 属性。当您提交包含无效值的表单时，浏览器会发出警告， 并将注意力集中在有问题的输入上。

<ph type="x-smartling-placeholder">

</ph>

由浏览器进行的基本内置验证。

您可以使用 :invalid CSS 选择器突出显示无效数据。使用 :not(:placeholder-shown)，以避免选择没有内容的输入。

input[type=email]:not(:placeholder-shown):invalid {
  color: red;
  outline-color: red;
}

尝试使用不同的方法突出显示具有无效值的输入。

必要时使用 JavaScript

显示/隐藏密码

您应添加一个显示密码切换开关，以便用户检查 用户输入的文字易用性 用户会受到影响 看不到自己输入的文字。目前还没有 不过，我们计划 实现。您 需要使用 JavaScript。

<ph type="x-smartling-placeholder">

</ph>

Google 登录表单：包含显示密码切换开关和忘记了密码链接。

以下代码使用文本按钮添加显示密码功能。

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.');
  }
}

最终结果如下：

<ph type="x-smartling-placeholder">

</ph>

Mac 和 iPhone 7 上的 Safari 中带有显示密码文本“按钮”的登录表单。

使密码输入功能可供访问

使用 aria-describedby 提供 元素说明约束条件。屏幕阅读器提供标签文本、 输入类型（密码），然后输入说明。

<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>

您可以在以下 Glitch 中查看这两种 ARIA 功能的实际效果：

创建无障碍表单提供了更多有助于创建无障碍表单的提示。

在提交前实时验证

HTML 表单元素和属性具有用于基本验证、 但您还应使用 JavaScript 在用户 输入数据，以及用户尝试提交表单的时间。

警告 ：客户端验证有助于用户输入数据，可以避免不必要的服务器负载，但您必须始终在后端验证和清理数据。

登录表单的第 5 步 此 Codelab 使用 Constraint Validation API（即 广泛支持）添加到 自定义验证，以便设置焦点和显示提示。

了解详情：使用 JavaScript 实现更复杂的实时 验证。

分析和 RUM

“不能衡量，无法改进” 和登录表单。您需要设定目标、衡量成效、改进网站 重复。

打折的可用性 测试可以 这对于尝试更改很有帮助，但您需要真实数据才能真正 了解用户在使用您的注册和登录表单时的体验：

• 网页分析：注册和登录网页浏览量、跳出率 然后退出。
• 互动分析：goal 漏斗（其中 用户放弃了登录或登录流程？）并且 事件 （用户在与您的表单互动时执行了哪些操作？）
• 网站效果：以用户为中心 指标（您的注册和登录情况 表单因某种原因而运行缓慢，如果是，原因是什么？）。

您还可以考虑实施 A/B 测试 不同的注册和登录方法，以及分阶段发布以验证 先对一部分用户进行更改，然后再向所有用户发布更改。

常规指南

设计良好的界面和用户体验可以减少用户放弃登录表单的情况：

• 不要让用户主动寻找登录账号！在顶部添加登录表单的链接 （使用易于理解的措辞，例如“登录”“创建账号”） 或注册。
• 保持专注！注册表单不是分散用户的注意力的地方 优惠和其他网站功能。
• 尽可能降低注册复杂性。收集其他用户数据（例如地址或 提供信用卡详细信息） 数据。
• 在用户开始使用您的注册表单之前，应明确说明 是什么意思。登录账号能为他们带来什么好处？为用户提供具体信息 激励用户完成注册。
• 尽可能允许用户通过手机号码表明自己的身份 而非电子邮件地址，因为某些用户可能不使用电子邮件。
• 让用户能够轻松重设密码，并在忘记了 密码？链接。
• 指向您的服务条款和隐私权政策文档的链接：明确 从一开始就如何保护他们的数据
• 请在注册信息中添加公司或组织的徽标和名称， 登录页，并确保语言、字体和样式与 。有些表单似乎与其他表单分属同一网站 尤其是当两者的网址明显不同时。

继续学习

• 创建出色的表单
• 移动设备表单设计最佳实践
• 更强大的表单控件
• 创建可访问的表单
• 使用 Credential Management API 简化登录流程
• 使用 WebOTP API 验证网络上的电话号码

照片由 Meghan Schiereck 提供，由 Unsplash 网站提供。