【译】登录表单最佳实践

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

如果您的站点需要用户登录使用，那么对于一些行动不便，工作繁忙和压力重重的人来说，友好的登录表单涉及就会显得至关重要了。设计不友好的登录表单不仅会错过用户的登录，而切会导致用户跳出率会变高---这也意味着用户的流失和不满。

试试吧！ 如果您希望通过动手教程学习这些最佳实践，请查看登录表单最佳实践代码实验室。

这是一个演示了所有最佳实践的登录表单示例：

检查清单：

• 使用有意义的HTML标签: <form>, <input>, <label>, and <button>
• 每个input都搭配一个<label>
• 使用标签的内置浏览器的属性： type, name, autocomplete, required, autofocus
• 将name="new-password"用于注册密码输入和更改密码表单中的新密码。
• 使用autocomplete="current-password"作为登录密码输入
• 不要为新密码使用自动完成功能
• 提供显示密码的功能
• 使用 aria-label 和 aria-describedby 作为密码输入
• 不要使用再次确认输入
• 移动端设计表单时，不要遮挡住输入或按钮
• 确保表单在移动设备上可用：使用清晰的文字，并确保输入和按钮足够大以用作触摸目标
• 在注册和登录页面保持统一的品牌和风格
• 在实际应用场景和本地测试：在注册和登录流程中构建页面分析、交互分析和以用户为中心的性能评估
• 在跨浏览器和设备间进行测试：表单行为在不同平台之间差异很大

注意：本文是关于前端最佳实践的。 它没有说明如何构建后端服务以对用户进行身份验证，存储其凭据或管理其帐户。 用户帐户，授权和密码管理的12个最佳实践概述了运行自己的后端的核心原则。 如果您在世界的不同地区拥有用户，则需要考虑本地化站点对第三方身份服务及其内容的使用。

本文还没有介绍两个相对较新的API，它们可以帮助您建立更好的登录体验：

Web OTP：通过SMS向手机发送一次性密码或PIN码。 这可以使用户选择一个电话号码作为标识符（无需输入电子邮件地址！），还可以实现两步验证登录和一次性支付代码以确认付款。

Credential Management: 使开发人员能够以编程方式存储和检索密码凭证和联合凭证。

Use 有意义的 HTML

使用以下元素构建项目：<form>，<label>和<button>。 这些启用了内置的浏览器功能，改善了可访问性，并为标签增加了含义。

Use form

您可能会倾向于将input包在<div>中，并且使用JavaScript处理输入数据提交。 通常来说最好是使用普通的<form>元素。 这使您的网站可供屏幕阅读器和其他辅助设备访问，调用浏览器的内置功能，使得对较旧的浏览器兼容会更简单，即使JavaScript失败，该网站仍然可以正常工作。

Use label

To label an input, use a <label>!

两个原因：

• 通过使用label的for属性将其与input的name或id关联起来，点击标签时可使input框获得焦点。
• 当label或者label关联的input获得焦点时，屏幕阅读器会读其文本。

不要将placeholders作为输入的标签。一般人们开始输入文字后，很容易忘记输入的内容，特别是当人们注意力不集中的时候（"我要输入电子邮件地址，电话号码或帐户ID吗？"）。除此之外占位符还有其他潜在的问题：如果你不信，可以参考Don't Use The Placeholder Attribute和Placeholders in Form Fields Are Harmful。

最好将标签放在输入上方。 根据Google AI的研究，这可以在移动设备和台式机之间实现一致的设计，并且可以使用户更快地进行注意到。 您将获得100%宽的标签和输入，而无需调整label和input的宽度以适合标签文本。

你可以在你手机设备上打开label-position看一哈

Use button

将<button>用于按钮！ Button元素不仅提供可访问性和内置的表单提交功能，而且可以轻松设置样式。 使用<div>或其他伪装成按钮的元素毫无意义。

在注册或登录表单中使用提交按钮，要使得其文本意思简单明了，例如：注册帐户或登录，而不是提交或开始。

即便在快速响应的网站上，有很多用户会多次单击按钮，这将减慢交互速度并增加服务器负载，介于此，在用户点击或者单击登录按钮后将其禁用。

相反地，请勿在等待用户输入的情况下禁用表单提交，例如用户未输入验证码，请不要禁用登录按钮。用户可能会错过某些内容，然后尝试反复点击（禁用的）按钮，并认为他不起作用。如果真的需要禁用表单提交，最好向用户说明单机禁用的按钮时缺少的内容或者需要做的操作。

注意：表单中按钮的默认类型为Submit。 如果要在表单中添加另一个按钮（例如：显示密码），请添加type =“ button”。 否则，tap或click它将提交表单。

不要两次输入确认

有些网站会强迫用户输入两次电子邮件或密码。 这可能会减少一些用户的错误，但会给所有用户带来额外的工作，并增加放弃率。 两次询问操作也没有意义，因为现代浏览器会提供自动填充电子邮件地址或建议使用强密码。 最好让用户确认他们的电子邮件地址（无论如何，您都需要这样做），并让他们轻松地重置密码（如果他们需要）。

充分利用元素属性

这就是奇迹出现的地方！浏览器可以使用input元素属性的多种有用的内置功能。

帮助用户更快地开始

至少在台式机上，将autofoucus属性添加到登录表单中的第一个input中，将使用户更快的输入，而不是选择输入。

保护密码的私密性 --- 但是用户可以根据需要查看密码

密码输入框应该利用type="password"去隐藏密码

使用<input type="password">也意味着Firefox等浏览器可以在提交表单时保存您的密码（以及使用name和id属性来猜测表单输入的含义）。

但是，您应该添加显示密码图标或按钮，以使用户能够检查他们输入的文本，并且不要忘记添加“忘记密码”链接。 请参阅Enable password display。

为移动用户提供可使用的键盘

使用<input type =“ email”>为移动用户提供适当的键盘，并通过浏览器启用基本的内置电子邮件地址验证……不需要JavaScript！

如果您需要使用电话号码而不是电子邮件地址，请<input type =“ tel”>启用手机上的电话键盘。 您还可以在必要时使用inputmode属性：inputmode =“ numeric”是PIN码的理想选择。 您想了解的更多有关输入模式的内容细节。

注意：type =“ number”将添加向上/向下箭头以增加数字，因此请勿将其用于不希望增加的数字，例如ID和帐号。

防止移动键盘阻挡“登录”按钮

如果不小心移动键盘可能会掩盖您的表单，或者更糟的是部分阻挡了“登录”按钮。 可能会导致用户在意识到发生了什么之前放弃登录。

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

测试一系列设备

您需要针对目标受众在各种设备上进行测试，然后进行相应调整。 BrowserStack可以在一系列实际设备和浏览器上对开源项目进行免费测试。

使用两个页面

一些网站（包括Amazon和eBay）通过在两页上询问电子邮件/电话和密码来避免此问题。 这种方法还简化了体验：一次只给用户分配一件事情。

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

您可以通过浏览器自动填充输入来帮助用户。 这对于放弃率很高的电子邮件输入尤其重要。

这有两个部分：

• 使用input框的name属性可以帮助浏览器自动存储电子邮件数据和其他输入类型数据
• autocomplete属性使浏览器可以使用name属性存储的数据自动填充输入。

你需要在注册和登录表单中输入密码进行不同的操作。

不要在注册表单上自动填写密码

不要在注册表单中为密码输入框添加自动填充功能。 浏览器可能已经存储了该站点的密码，并且在注册时自动填写密码没有意义：例如，如果两个人共享同一设备，而一个人想要创建一个新帐户。

用户输入新密码时，请使用name =“ new-password”

使用适当的密码输入名称来帮助浏览器区分新密码和当前密码：

• 将name =“ new-password”用于以注册形式输入的密码，或以change-password形式输入新密码。 这告诉浏览器您希望它存储该站点的新密码。

用户输入现有密码时，请使用name =“ current-password”

• 将name =“ current-password”用于登录形式的密码输入，或用于用户的旧密码（以更改密码形式）的输入。 这告诉浏览器，您希望它使用它为网站存储的当前密码。

注册表单

<input name="new-password" type="password" …>

登录表单

<input name="current-password" type="password" autocomplete="current-password" …>

支持密码管理

不同的浏览器在处理电子邮件自动填充和密码建议方面有所不同，但是效果大致相同。 例如，在台式机上的Safari 11及更高版本中，显示密码管理器，然后使用生物特征认证（指纹或面部识别）（如果可用）。

桌面版Chrome（chrome83）会根据您键入的内容显示电子邮件建议，显示密码管理器，然后自动填写密码。

注意：浏览器密码和自动填充系统并不简单。 猜测，存储和显示值的算法不是标准化的，并且因平台而异。 例如，正如Hidde de Vries指出的那样：“ Firefox的密码管理器通过recipe system来补充其调起其功能。”

autofill：Web开发人员应该知道的内容，但没有更多有关使用名称和自动完成功能的信息。 HTML规范列出了所有59个可能的值

启用浏览器提示输入强密码

如果在注册表单中为密码输入包含了autocomplete =“ new-password”，现代浏览器会建议使用强密码。

Safari在桌面上的操作方法如下。

自12.0版开始，Safari就建议提供强大的独特密码。

使用内置的浏览器密码生成器意味着用户和开发人员无需确定“强密码”是什么。 由于浏览器可以安全地存储密码并根据需要自动填充密码，因此用户无需记住或输入密码。

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

帮助用户避免意外丢失输入字段

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

为手指和拇指而设计

默认浏览器上与输入元素和按钮相关的所有内容的大小都太小，这是许多站点上登录表单的常见问题，尤其是在移动设备上更普遍。

确保输入和按钮足够大

输入框和按钮的默认大小和填充在桌面浏览器上太小，在移动设备上甚至更糟。

根据Android辅助功能指南，触摸屏对象的建议目标大小为7–10 mm。 Apple界面指南建议使用48x48像素，W3C建议使用至少44x44 CSS像素。 在此基础上，向移动设备的输入元素和按钮添加（至少）大约15像素的填充，在桌面上添加大约10像素的填充。 使用真实的移动设备和真实的手指或拇指进行尝试。 您应该可以轻松地点击每个输入和按钮。

Tap目标的大小合不合理的检测可以使用Lighthouse， Lighthouse的audit可以帮助您自动检测太小的输入元素。

为拇指而设计

搜索触摸目标，您会看到很多有关食指操作的图片。 但是，在现实世界中，许多人会用拇指与移动设备互动。 拇指比食指大，控制也不那么精确。 更重要的是要有足够大小的触摸目标。

使文字足够大

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

不同平台上的浏览器对字体的大小不同，因此很难指定在任何地方都能正常使用的特定字体大小。 对热门网站的快速调查显示，桌面上的大小为13–16像素：匹配的物理大小是移动文本的最小最小值。

这意味着您需要在移动设备上使用更大的像素大小：桌面版Chrome上的16px很清晰，但是即使视野开阔，在Android版Chrome上也很难阅读16px文本。 您可以使用媒体查询为不同的视口大小设置不同的字体像素大小。 20px大约可以在移动设备上使用，但您应该与视力不佳的朋友或同事进行测试。

该文档未使用清晰的字体大小Lighthouse的audit可以帮助您自动检测太小的文本。

注意：不幸的是，自动填充文本（至少在Android的Chrome浏览器上）很小，并且无法使用CSS调整大小。 Chromium问题＃953689正在跟踪问题。 如果您认为这很重要，请为该问题加注星标！

在输入框之间提供足够的空间

添加足够的边距以使输入能够很好地用作触摸目标。 换句话说，以手指宽度的边缘为目标。

确保你的输入清晰可见

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

除了padding外，还要添加border：在白色背景上，一个好的通用规则是使用#ccc或更暗的颜色。

使用内置的浏览器功能来警告无效的输入值

浏览器具有的内置功能，可以对具有type属性的输入进行基本的表单验证。 当您提交invalid value的表单并将焦点放在有问题的输入上时，浏览器会发出警告。

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

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

尝试用不同的方式高亮显示无效值的输入

必要时使用JavaScript

切换密码显示

您应该添加显示密码图标或按钮，以使用户能够检查他们输入的文本。 当用户看不到他们输入的文本时，可用性会受到影响。 尽管有实施计划，但目前尚无内置方法。 您需要改为使用JavaScript。

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

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

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

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- describeby为密码规则提供描述约束条件元素的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标签以警告将要显示密码。 否则，用户可能会无意间泄露密码。

<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添加自定义验证，以设置焦点和显示提示。(Step 5 of the sign-in form codelab uses the Constraint Validation API (which is widely supported) to add custom validation using built-in browser UI to set focus and display prompts.)

Find out more: Use JavaScript for more complex real-time validation.

Analytics and RUM

“无法衡量，无法改善”对于注册和登录表单尤其如此。 您需要设定目标，衡量成功，改善站点并重复。

尝试增加可用性测试对于更改很有帮助，但是您需要真实世界的数据才能真正了解您的用户如何体验注册和登录表单：

• 页面分析：注册并登录页面浏览量、跳出率和退出。
• 交互分析：目标漏斗（用户在哪里放弃您的登录或登录流？）和事件（用户在与表单交互时会采取什么操作？）
• 网站性能：以用户为中心的指标（你的注册和登录表单是否因为某种原因而变慢，如果是，原因是什么？）。

您可能还需要考虑实施A / B测试，以便尝试使用不同的注册和登录方法，并分阶段推出以在对所有用户发布更改之前验证一部分用户的更改。

一般准则

精心设计的UI和UX可以降低登录表单的跳出率：

• 不要让用户搜寻登录！使用易于理解的措辞（例如“登录”，“创建帐户”或“注册”）在页面顶部放置指向登录表单的链接。
• 保持专注！注册表单并不是吸引人们使用优惠和其他网站功能的地方。
• 最小化注册复杂性。仅在用户看到提供该数据的明显好处时，才收集其他用户数据（例如地址或信用卡详细信息）。
• 在用户开始使用您的注册表单之前，请先弄清楚其价值主张是什么。他们如何从登录中受益？给用户具体的激励措施以完成注册。
• 如果可能的话，允许用户使用手机号码而不是电子邮件地址来标识自己，因为某些用户可能不使用电子邮件。
• 方便用户重置密码，并忘记密码？链接明显。
• 链接到您的服务条款和隐私政策文件：从一开始就向用户明确说明您如何保护其数据。
• 在注册和登录页面上包括公司或组织的徽标和名称，并确保语言，字体和样式与网站的其余部分匹配。某些表单看起来不像其他内容属于同一个站点，特别是如果它们具有明显不同的URL。

不要停止学习：

• Create Amazing Forms
• Best Practices For Mobile Form Design
• More capable form controls
• Creating Accessible Forms
• Streamlining the Sign-in Flow Using Credential Management API
• Verify phone numbers on the web with the Web OTP API

写在最后，翻译这篇文章，一方面是因为对自己的支持做补充，另一方面，这篇文章里的很多链接都值得深读，做个备忘。

本文翻译自Sam Dutton的《Sign-in form best practices》，如有翻译不当，请多多交流。

原翻译地址：www.yuque.com/17biu/sacpi…