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