使用跨平台的浏览器功能来搭建安全，无障碍以及容易使用的登录表单

译者按：

登录页常常是用户使用我们页面最早接触的几个页面之一。正因此，一个好的登录页面对于提升用户体验并吸引用户继续使用我们的产品是至关重要的。相信大家都有过因为注册或登录流程及体验上感到挫折所以不继续使用对应产品的经验。虽然不一定适用于所有情况，但希望本文中提到的一些最佳实践能够帮助大家打造更好的用户体验。

对于喜欢观看视频的人来说，文章还有一个对应的 视频。

正文：

只要有用户需要登录你的网页，一个好的登录表单就是至关重要的。尤其是对于网不好，使用手机，紧急或在有压力等情况下登录的人来说。一个设计的很差的表单常常会导致一个比较高的 弹出率 。而每一次弹出都可能意味着一个失去且不满的用户——而不仅仅是一次登录失败。

尝试一下! 如果你希望亲手实践一下这些最佳实践，可以看一下 登录表单最佳实践 codelab .

链接为一个实践了所有最佳实践的登录表单: sign-in-form.glitch.me

Check List

• 使用有语义化的 HTML 元素: <form>, <input>, <label>, 和 <button>.
• 使用 <label> 来为输入框加上标签
• 使用元素的 attributes 来 使用浏览器内置的功能: type, name, autocomplete, rquired, autofocus.
• 为输入框的 name 和 id 属性设置不会在不同加载或发布中改变的值
• 将登录组件的部分放在属于自己的 form 元素中
• 保证表单提交动作的成功
• 为注册表单或重设密码页面中的密码输入框使用 autocomplete="new-password"
• 为登录页面的密码框使用 autocomplete=“current-password”
• 提供显示密码的功能.
• 为密码输入框使用 aria-label 和 aria-desribedby
• 不要强迫用户输入两次（来验证）
• 设计好表单来避免输入框或者按钮被手机键盘遮挡
• 保证表单在手机上是可用的：使用可辨识的字体，并确保输入框和按钮为用户可触碰到的尺寸
• 为你的注册及登录界面维持品牌调性和风格
• 在开发测以及用户侧检测你的表单：在你的注册流及登录流中加入页面分析，交互分析以及以用户为中心的性能检测
• 在不同的浏览器以及机器上测试你的页面：不同平台间表单的行为通常有着巨大的差别

使用有意义的 HTML

使用为了对应功能而设计的元素: <form>, <label> 和 <button>。这些元素可以开启浏览器的内置功能，提升无障碍性，并为你的标记 (markup) 添加意义。

使用 <form>

你可能会被引诱着把输入框放在 <div> 中，并完全用 JavaScript 来上传输入的数据。多数情况下，使用老朋友 <form> 反而会更好。这会让你的页面对屏幕阅读器或其他辅助装置更友好，启用一系列浏览器内置的功能，更容易适配旧的浏览器，以及让页面在没有 JavaScript 的时候也能工作。

啊，我懂了！

一个常见的失误就是把整个网页都包裹在一个表单内，这有可能造成浏览器密码管理器和自动补全的问题。为每个需要表单的组件使用不同的

使用 <label>

使用 <label> 来标示输入

<label for=“email”>Email</label>
<input id=“email” …>

这有两个理由：

• 触碰 label 会把 focus 移动到对于的输入框上。 通过使用 for 属性和输入的 name 和 id 来关联对应的 input 和 label。
• 当 focus 移动到 label 或者对应的 input 时，屏幕阅读器会读出对应的标示

不要用 placeholder 替代 label。因为当人们开始输入后，他们倾向于忘记自己在输入什么，尤其是他们正在分心时 (诶，我在输入地址还是手机号还是我的用户 ID)。同时，使用 placeholder 也有很多坏处，如果你没有被说服，可以参考以下两篇文章 不要使用 Placeholder 属性 和 表单项中的 Placeholder 是有害的

最好把 label 放在 input 的上方。这有助于在手机端和桌面端维持一个统一的设计，同时 Google AI research 的研究表明，这样会允许用户更快地浏览页面上的信息。你的 label 和 input 都可以占满屏幕而不用调整宽度以便把他们塞在一行。

如果都在一行的话，标签和输入的宽度都会受限。

打开 label-position Glitch 来看一下实际效果吧。

使用 <button>

使用 来干按钮的活！Button 元素提供无障碍的行为以及内置的表单提交功能，同时你也可以轻松地调整他们的样式。你不必使用 <div> 或者其他元素来伪装成按钮。

保证你的提交按钮准确描述它的作用。比如说 创建账号 或者 登录，而不是 提交 或者 开始.

保证表单提交动作的成功

帮助密码管理器理解表单已经被提交了。有两种方法实现这一功能:

1. 导航到一个不同的页面
2. 使用 History.pushState() 或者 History.replaceState() 来模拟导航，并且移除密码表单。

当使用 XMLHttpRequest 或者 fetch 请求的时候，确保返回中表示了登录成功，并且通过从 DOM 中移除 form 和向用户提示成功处理。

当用户点击了登录按钮后可以考虑禁止对应的按钮. 很多用户会多次点击按钮 ， 甚至在网页很快并且响应及时的时候. 这会降低交互的速度以及增加 服务器的负担。

与之相反，不要在等待用户输入时禁止提交按钮. 比如说，不要在用户还没填写密码时禁止提交。 用户可能会忘了填写对应的输入，并在反复点击禁用的登录按钮后认为网页不工作了。如果你一定要禁止，当他们点击禁用的按钮时请向用户说明他们忘了填什么。

不要强迫用户输入两次一样的东西

有些网站强迫用户输入两次邮箱或者密码 (来验证)。这有可能降低部分用户的错误率，但是却会麻烦到所有用户，同时这也提升了 放弃率 。当浏览器会自动填充邮箱或推荐强健的密码时，问两次密码是毫无必要的。允许用户确认他们的邮箱会是更好的措施，同时也让用户能更简单的重设密码。

用好元素的 attributes

这正是奇迹发生的地方! 浏览器有许多有用的内置功能都使用到了 attributes。

帮助用户更快速地开始输入

添加 autofocus 属性到表单的第一项. 这让从哪开始变得很清楚，同时这意味着用户至少在桌面端不用再选择输入框才能输入。

Autofocus 在桌面端提供了清晰的视觉焦点

保持密码的私密性 — 但允许用户在需要时查看

密码输入应该添加 type=“password” 来隐藏密码的文本，并且帮助浏览器理解这是个密码输入。(浏览器使用了 多种方式 来理解输入框的角色以及决定是否提供保存密码的功能)

你应该添加显示密码的图标或者按钮来让用户检查他们输入的密码——同时不要忘记添加忘记密码的链接。 如何显示密码 .

让手机用户能够使用正确的键盘

使用 来让手机用户使用恰当的键盘，并且开启内置的基本邮箱地址验证…这一切都不需要 JS！

如果你需要的是电话号码而不是邮箱, <input type=“tel”> 会在手机上打开电话键盘. 你也可以在需要的时候使用 inputmode 比如说 inputmode=“numeric” 就非常适合输入 PIN. 所有你想要知道的关于 inputmode 的事 有更多细节.

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

不幸的是，在你不小心的时候，手机的键盘有可能会挡住你的表单，甚至是你的登录按钮。在这种情况下，用户很可能会在了解到发生了什么之前就放弃登录了。

登录按钮：左侧可见，但右侧不可见了

在可能的情况下，通过只把邮箱，密码输入框以及登录按钮放在顶部来防止阻挡的发生。把其他内容都放在最底下。 这个键盘不会阻挡登录按钮

在一系列机器上测试你的页面

你需要在目标用户可能会使用的一系列机器上测试，并且相应的调整。BrowserStack 为开源项目提供一些列真机和浏览器的测试 free testing for open source projects 登录按钮： 在 iPhone 7 和 8 上被挡住了，但在 11 上看得见

考虑用两个页面（分别输入）

有些网站（包括 Amazon 和 eBay）通过分别为邮箱和密码使用两个页面来规避这一问题。这个方法同时也让体验更简单: 用户一次只用做一件事。

理想的情况下，这应该用一个 <form> 元素实现。使用 JavaScript 来一开始仅展示邮箱的输入，然后隐藏它并展示密码的输入。如果你一定要迫使用户移动到一个新的页面来输入密码，第二个页面的表单应该包括一个含有邮箱值的隐藏输入框，来保证密码管理器能够保存正确的值。 Chromium 能够理解的密码表单样式 提拱了一个例子。

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

你可以帮助浏览器正确的保存数据并自动填充，然后用户就可以不用去集邮箱和密码了。 这对于移动端特别重要，尤其是在输入邮箱的时候，（重复输入邮箱）往往导致 high abandonment rates

这有两部分：

1. Autocomplete, name, id 和 type 属性帮助浏览器理解输入框的角色来存之后用来自动填充的数据。如果想要启动自动填充的话，现代浏览器基本都要求输入框有稳定的 name 或者 id，并且位于一个有 submit 按钮的 <form> 中。
2. autocomplete 帮助浏览器自动输入通过 储存的数据

为邮件输入使用 autocomplete=“username，因为 username 会被大多数现代浏览器中的密码管理器辨识，虽然你应该使用 type=“email” 并且用 id=“email” 以及 name=“email”。

对于密码输入来说，使用适当的 autocomplete 值来帮助浏览器区分新的和现在的密码。

当用户输入新的密码的时候使用 autocomplete=“new-password”

• 为注册页面或者更改密码页面中的新密码使用 name=“new-password”。这回告诉浏览器你想存一个新的密码

当用户输入已有密码的时候使用 autocomplete=“current-password”

• 为登录页面或者更改密码界面中的旧密码使用 autocomplete=“current-password”。这会告诉浏览器你想用以前存的密码。

注册表单:

<input name=“new-password” type=“password” …>

登陆表单:

<input name=“current-password” type=“password” autocomplete=“current-password” …>

支持密码管理器

不同的浏览器有不同的自动填充和密码推荐行为，但效果基本是一致的。在 Safari 11 之后，先展示密码管理器, 然后如果有的话也会使用生物验证 （指纹或者面部识别）

通过自动补全登陆，不需要输入任何文字

桌面版 Chrome 会根据你的输入展示邮箱推荐，密码管理器，然后自动填充密码。

小心: 浏览器的密码和自动填充系统并不简单。推测，储存及展示的算法并没有被标准化，并且在不同的平台有着不同的表现。比如说， Hidde de Vries 指出: “火狐的密码管理器通过一套”食谱”系统（recipe system）补全自己的启发算法（heuristics）

Autofill: 网页开发者应该知道，但却不知道的 有很多关于如何使用 name和autocomplete的信息. HTML spec 列出了所有的 59 种可能的 values.

启用浏览器推荐健壮的密码的能力

现代浏览器会使用启发式算法决定什么时候展示密码管理器以及推荐健壮的密码。

下面是桌面端 Safari 的行为：

（Safari 从 12.0 起提供推荐健壮且独特的密码功能.）

使用内置的密码生成器意味着用户和开发者都不用担心什么是健壮的密码. 因为浏览器可以安全的保存密码并自动输入他们。用户不用再记住和输入密码。

这个方法的坏处就是很难在不同的平台分享密码。

帮助用户避免不小心忘记某个输入项

为邮箱和密码添加 required 属性。现代浏览器会自动提示缺失的项和改变 focus 到确实的项上。 不需要 JavaScript !

为手指和拇指设计

和输入相关的元素和按钮的默认尺寸都太小了，特别是在手机上。这可能看起来很明显，但却是很多网站登录框的常见问题。

确保输入框和按钮都足够大

输入框和按钮的默认尺寸在桌面端都太小了，更不用说手机上了。

根据 安卓无障碍指南 触摸屏元件的推荐目标尺寸是 7-10 mm. 苹果界面指南推荐 48x48 px, 以及 W3C 推荐 至少 44x44 CSS pixels . 在这基础上，为手机上的输入元素和按钮添加 （至少）15px 的 padding，以及为桌面端添加 10px 的padding。尝试实际用用这些尺寸。 你应该可以舒服的点击所有的输入元素。

可触碰对象的尺寸并不适合 。 Lighthouse audit 可以帮助你自动地发现过小的元素。

为大拇指设计

当搜索可触碰对象（Touch Target）的时候，你会看到很多使用☝️的照片。但是在现实生活中大多数人都是使用大拇指来和手机交互。大拇指比食指更大，所以操作更不准确。这为调整可触碰区域到足够大提供了更多理由。

让文字足够大

和上述的尺寸和 padding 一样， 浏览器为输入组件和按钮设置的默认字体大小都太小了，尤其是在手机上。

桌面和手机端的默认尺寸: 输入框文字的大小对于许多用户来说都太小所以看不清

不同的浏览器有不同的调整文字尺寸的方法，所以列出一个通用的的尺寸是非常困难的。 对流行的页面的快速调查显示桌面端应为 13-16 px，而在手机上与物理尺寸一致是一个很好的底线。

这意味着你应该在手机上用更大的尺寸。 16px 在桌面端 Chorme 是一个很清晰的尺寸，但在 Android 上就算是对视力好的人来说也很难阅读。 你可以使用 media queries 来设置不同的尺寸。 20px 基本上是一个对手机很友好的尺寸了，但是你应该和视力不利的朋友和同事测试一下这些尺寸。

Document doesn’t use legible font sizes Lighthouse audit 可以帮助你自动的发现过小的文字。

在不同的输入框之间留出足够的空间

在输入框间增加足够大的 Margin 使之和 touch targets 一样工作。换句话说，留出大概一指宽的 margin。

确保你的输入框可以清楚的被看见

Inputs 组件的默认 border 样式使他们很难被看见。在某些平台上 （Chrome for Android）他们甚至可以说是隐形的。

和 padding 一样，解决方案就是添加 border：在白色背景上，一个好的规则就是用 #ccc or 更暗的颜色。

使用浏览器自带功能来提示无效的输入

浏览器有内置的功能为有type 的输入做基本的表单校验。 浏览器会在你提交不合规的表单数据时提醒你，并把 focus 放在有问题的输入上。

你可以使用 :invalid CSS 选择器 来高亮无效的数据. 使用 :not(:placeholder-shown) 来避免选中空白的输入。

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

尝试使用不同的方法来高亮有无效数据的输入框。

在需要的时候使用 JS

切换密码的显示

你应该添加一个显示密码的 Icon 或者按钮来允许用户检查他们输入的文字。当用户看不了他们出入的文字时 可用性会受损 现在暂时没有内置方法来实现这一功能，虽然已经 计划上了 。你仍然需要使用 JS。

以下代码展示了如何实现现实密码这一功能。

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>
<—! HERE —>
  <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;
}

以及用来显示 password 的 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.’);
  }
}

这是最后的成果：

让密码输入更加无障碍化

通过给描述规则的元素对应的 ID 来使用 aria-descriedby 概括密码的规则。屏幕阅读器会读出 label，输入类型, 以及介绍。

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

创造无障碍的表单 有更多帮助表单实现无障碍化的 tips。

实时及提交前验证

HTML 表单元素和 Atrributes 有内置的功能来做基础验证，但当用户在输入数据或尝试提交前你也应该使用 JS 来做更健壮的验证。

登录表单 codelab 的 Step 5 使用了 Constraint Validation API (已经广泛支持 widely supported ) 来添加定制的规则以利用浏览器内置的UI 来调整 focus 和展示提示。

查看更多: Use JavaScript for more complex real-time validation .

分析和 RUM （Real User Monitoring）

“你提升不了你无法测量的” 尤为体现在注册和登录表单上。你需要制定目标，测量成功，以及提升网页—然后重复。

Discount usability testing 在尝试新的改变时非常有效, 但你仍然需要真实世界的数据来完全理解用户在使用注册和登录表单时的体验。

• 页面分析: PV, bounce rates, and exits .
• 交互分析: goal funnels (用户在什么时候放弃注册或登录?) 和 events (用户在和页面交互的时候做了什么?)
• 页面性能: user-centric metrics (你的登录或注册页面是否很慢，如果是，为什么?).

你也许想要考虑做 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

Photo by Meghan Schiereck on Unsplash .

欢迎关注「 字节前端 ByteFE 」

简历投递联系邮箱「 tech@bytedance.com 」