登录和注册表单的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

- 
+ 
- 
+ 
  Login

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

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

让我们一起来看看:

  
    New password:
-   
+   
  
  
    Confirm password:
-   
+   
  
  Sign Up

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

2. 设置type="email"

  
    E-mail:
-   
+   
  

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

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

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

3. 所有可点击项都应该使用或，而不是

或

- Forgot your password? Reset it here.
+ Forgot your password? Reset it here.

- 
Login
+ Login

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

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

通过使用

而不是

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

此外，我们应该使用

来显示/隐藏密码功能;不要忘记aria-label标签，如果你使用的是一个图标按钮:

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

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

4. 用

包裹字段和提交

- 

+ 
    Email: 
    Password: 
+   

Login + -

- Login

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

5. 避免使用placeholder替代

- 
+ 
+   E-mail:
+   
+ 

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

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

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

-  I agree with the privacy policy
+ 
+    I agree with the privacy policy
+ 

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

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

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状态之后，也将其添加到标记中。这是改善网站键盘可访问性的第一小步。

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

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

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

  
+         required aria-invalid="true" aria-errormessage="email-error">
  
Enter a valid email address

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. 所有可点击的元素都应该使用

或，而不是

或

用标签内包裹输入字段和提交

使用描述标签，避免placeholder

用标签内包装复选框

为UI设置可视:focus状态

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

阻止在输入中间进行验证

阻止表单发送两次

考虑网络延迟和服务器/网络错误