登录和注册表单的11个HTML最佳实践

原文：11 HTML best practices for login & sign-up forms

原作者：Andrey Sitnik

翻译已获原文作者许可，禁止转载和商用

大多数网站都有登录或注册表单;它们是业务转换的关键部分。然而，即使是流行的站点也没有实现本文中提到的11个最佳实践，并且至少有一个错误。所以，阅读这篇文章，然后检查你的表单，并通过使用HTML技术来改善你的用户体验。

一般来说，登录和登录表单都非常简单。对于大多数网站来说，它们只有两个输入框和一个提交按钮。但是，即使这么简单的HTML结构，许多网站仍然有一些小错误。

由于这种类型的表单很简单，并且有很多出错的可能，因此它们提供了一个很好的学习环境，既可以学习一些新的HTML特性，也可以掌握使用任何类型的表单生成最佳用户体验所需的技能。

考虑无密码流程替代电子邮件/密码

在我们开始实践之前，注意: 在本文中，我们将使用经典的电子邮件/密码表单作为示例。然而，就安全性而言，密码实际上是让用户登录的最糟糕的方式，而且这种方法有许多众所周知的弱点。让我们快速看几个:

1. 这份关于2018年verizon数据泄露的报道 的报告称，超过70%的人在不同网站上重复使用密码。攻击者可能会在一个网站的一些泄露数据中找到跨网站共享的密码，并用它来窃取另一个网站的帐户。此外，与我们将在下面讨论的无密码选项相比，将2FA作为解决方案实现会降低用户体验。
2. 用户经常忘记密码，重置密码需要花费太多时间。根据传输安全公司的这份报告，55%的用户因为登录过程过于复杂而放弃使用网站。

如果你想改进你的登录表单，第一步应该是考虑无密码流程。

以下是我目前最喜欢的无密码实现:

1. 不要使用DIY实现，而是使用安全的、设计良好和维护良好的第三方解决方案，比如Auth0或Amazon Cognito。对于我们的几个客户项目，包括具有最高安全性要求的项目，我们使用了其中一种方法进行身份验证。
2. 苹果和谷歌提出的新密钥标准。纽约时报的这篇演示和文章解释了它是如何工作的，以及为什么它更好。
3. 实现带有登录链接的电子邮件(许多用户在每次登录时都使用记住密码功能)。

您还可以组合这些选项，例如，为使用新浏览器的用户使用passkey，为没有passkey的用户使用登录链接。

解决了这些问题后，让我们继续讨论登录和注册表单的11个最佳实践。(在阅读时，请记住，几乎所有这些指导方针也适用于任何类型的表单。)

1. 设置 autocomplete

- <input type="email">
+ <input type="email" autocomplete="username">
- <input type="password">
+ <input type="password" autocomplete="current-password"><button>Login</button>

密码管理器是降低电子邮件/密码表单安全风险的唯一选择(但即使它们也不能避免所有风险)。这就是为什么给密码管理器一个辅助是很重要的。

标签有一个非常有用的autocomplete属性。它还允许密码管理器区分登录表单(current-password)和注册表单(new-password)。

让我们一起来看看:

  <label>New password:
-   <input type="password">
+   <input type="password" autocomplete="new-password"></label><label>Confirm password:
-   <input type="password">
+   <input type="password" autocomplete="new-password"></label><button>Sign Up</button>

如果你不知道你在做什么，不要设置autocomplete="off" !这样做可能会降低用户体验。只有当我们需要隐藏非常敏感的数据(比如医疗网站上的“症状”字段)时，我们才应该使用这个设置。

2. 设置type="email"

  <label>E-mail:
-   <input type="text" autocomplete="username">
+   <input type="email" autocomplete="username"></label>

登录表单最常见的错误之一是在e-mail字段中使用type="text"而不是type="email"。为什么这个属性很重要?

1. 浏览器会在一个自动完成的弹出框中提示用户的电子邮件地址(即使用户是第一次打开一个网站)。
2. 在触摸设备上，用户将会被提示使用一个专门为输入电子邮件而设计的、更舒适的键盘。
3. 它支持内置的电子邮件验证。

如果你不喜欢浏览器内置的验证，不要设置type="text"。相反，使用novalidate属性。

3. 所有可点击项都应该使用<button>或<a>，而不是<div>或<span>

- Forgot your password? <span>Reset it here</span>.
+ Forgot your password? <a href="/restore">Reset it here</a>.- <div>Login</div>
+ <button>Login</button>

链接会改变当前页面，我们应该对所有链接使用<a>。按钮不会改变页面的URL，只会改变当前页面的状态;我们应该对所有按钮使用<button>。

与<span onClick={…}>相比，使用<a>标签有很多好处。例如，用户可以在新选项卡中打开链接，或者在单击之前查看新的URL。

通过使用<button>而不是<div>，你可以让你的网站更容易访问，并改善键盘用户体验:屏幕阅读器会告诉用户什么时候他们正在处理一个按钮;按钮将具有:focus状态，以改进键盘用户体验。

此外，我们应该使用<button>来显示/隐藏密码功能;不要忘记aria-label标签，如果你使用的是一个图标按钮:

<button type="button" aria-label="Show password"><div class="eye-icon">
</button>

这里还有一点:<a>和<button>也很适合用于开发目的。通过对交互元素使用<a>/<button>，你可以更容易地为所有的交互元素创建一个CSS选择器:

button, a {cursor: pointer; /* Using pointer is controversial, this is just an example */
}

4. 用<form>包裹字段和提交<button>

- <div>
+ <form><label>Email: <input type="email" autocomplete="username"></label><label>Password: <input type="password" autocomplete="current-password"></label>
+   <button>Login</button>
+ <form>
- </div>
- <button>Login</button>

确保将所有表单的字段及其提交<button>包装在<form>标签中。只有当字段位于< form >标签内并且只有一个提交按钮时，使用Enter提交表单才有效。(此外，使用屏幕阅读器的用户会喜欢这种实现提供的更好的导航。)

5. 避免使用placeholder替代<label>

- <input placeholder="E-mail" type="email" autocomplete="username">
+ <label>
+   E-mail:
+   <input type="email" autocomplete="username">
+ </label>

创建placeholder属性是为了显示输入的示例，而不是为了描述该输入。因此，我完全不建议将它用作<label>标记的替代品。此外，当用户输入数据时，占位符值将被隐藏，并且它们还经常存在对比度问题。

这对于简短的电子邮件+密码表单来说不是那么明显，但在较大的表单中占位符的问题就很明显了。

6. 用<label>标签包装复选框输入

- <input type="checkbox"> I agree with the privacy policy
+ <label>
+   <input type="checkbox"> I agree with the privacy policy
+ </label>

默认情况下，复选框输入的尺寸非常小，因此只能检测到很小的点击区域。这意味着用户需要更多的时间来精确地将光标放置在需要的位置。但是，如果复选框输入被包装在<label>标签中，那么单击其文本也会改变复选框的值。(另外，请注意，每个单独的复选框输入都需要自己的<label>标记。)

这样做的时候，最好添加一个清晰的悬停效果，让用户知道他们可以点击文本来触发输入:

label:hover {background: oklch(0 0 0 / 10%);
}

7. 添加一个可见焦点状态

- *:focus {
-   outline: none;
- }
+ button:focus-visible, a:focus-visible, input:focus-visible {
+   outline: 5px solid oklch(60% 0.15 252);
+ }

在我们的应用程序中，我们经常忘记或忽略键盘用户体验。但是当涉及到表单时，一般来说，每个用户都会使用键盘。我们需要考虑如何从键盘访问UI。

第一步是添加对比度:focus状态以突出显示当前字段。用户将使用他们的周边视觉来确定焦点被移动的位置。Sara Soueidan写了一个很棒的指南，解释了如何使:focus指示器清晰可见。

在为输入字段和按钮创建:focus状态之后，也将其添加到<a>标记中。这是改善网站键盘可访问性的第一小步。

永远不要在你的应用中禁用:focus状态。

另一个提示:如果您开发SPA并且想在单击菜单项后移除:focus状态，请使用:focus-visible。

8. 为屏幕阅读器标记无效字段

  <input type="email" autocomplete="username"
-         class="invalid">
+         required aria-invalid="true" aria-errormessage="email-error"><div id="email-error">Enter a valid email address</div>

aria-invalid和aria-errormessage展示屏幕阅读器用户的验证错误。

另一个注意事项:通过使用required属性警告屏幕阅读器用户关于必填字段也很不错。如果您不喜欢浏览器内置的required验证，请确保在实现自己的验证时使用aria-required属性。

9. 防止在用户输入中间进行验证

- input.addEventListener('keyup', () => {
-   if (validate(input)) {
-     markValid(input)
-   } else {
-     markInvalid(input)
-   }
- })
+ input.addEventListener('input', () => {
+   if (validate(input)) {
+     markValid(input)
+   }
+ })
+ input.addEventListener('change', () => {
+   if (validate(input)) {
+     markValid(input)
+   } else {
+     markInvalid(input)
+   }
+ })

当用户在表单中输入数据时，我们不想让错误动画分散他们的注意力或让他们感到困惑，所以不要在用户还没有完成输入之前显示不是有效邮箱的错误。

作为一种解决方案，在用户完成输入后(通过移动到另一个控件或提交表单)，使用change而不是keyup进行验证。当然，我们仍然可以使用input/keyup，但只能隐藏输入过程中的错误。

下面是关于内联表单验证的一个很好的指南。

10. 防止表单发送两次

form.addEventListener('submit', () => {submit.disabled = true// Fix for Firefox. It persists the dynamic disabled state without this hack.submit.autocomplete = 'off'// We are using setTimeout for page-reload submit.// For AJAX, use await and try-finally to enable submit the button again.setTimeout(() => {button.disabled = false}, 2000)
})

用户经常会不小心双击而不是单击。因此，为了防止显示一些服务器错误，最好在表单提交时禁用该按钮。

11. 使用AJAX时，要考虑网络延迟和服务器/网络错误

  form.addEventListener('submit', async () => {
-   await fetch(…)
+   try {
+     showLoader()
+     await fetch(…)
+   } catch (e) {
+     showError(e)
+   } finally {
+     hideLoader()
+   }})

对于每个AJAX请求，我们应该始终考虑两件事:

1. 向用户显示加载状态。在本地开发期间，您有0毫秒的延迟，但是真实用户在服务器响应之前将有几秒钟的延迟，因此用户应该在单击提交按钮后看到某种反馈。
2. 处理网络和服务器错误。你不会在本地开发中看到这种情况，但在生产环境中，每个用户都可能遇到WiFi连接失败或服务器出现Error 500错误;为它们做好准备，并向用户显示一些适当的文本。

注意:对于授权表单，最好通过页面重载提交表单，因为它会将用户的token保存到httpOnly-cookie并更新web应用中的所有存储。

总结

1. 设置autocomplete输入字段
2. 为输入字段选择正确的type
3. 所有可点击的元素都应该使用<button>或<a>，而不是<div>或<span>
4. 用<form>标签内包裹输入字段和提交 <button>
5. 使用<label>描述<input>标签，避免placeholder
6. 用<label>标签内包装复选框
7. 为UI设置可视:focus状态
8. 为屏幕阅读器标记无效字段
9. 阻止在输入中间进行验证
10. 阻止表单发送两次
11. 考虑网络延迟和服务器/网络错误