石家庄网站建设机构,广告公司照片,社区网站制作教程,有没有兼职做设计的网站原文#xff1a;11 HTML best practices for login sign-up forms 原作者#xff1a;Andrey Sitnik 翻译已获原文作者许可#xff0c;禁止转载和商用 大多数网站都有登录或注册表单;它们是业务转换的关键部分。然而#xff0c;即使是流行的站点也没有实现本文中提到的… 原文11 HTML best practices for login sign-up forms 原作者Andrey Sitnik 翻译已获原文作者许可禁止转载和商用 大多数网站都有登录或注册表单;它们是业务转换的关键部分。然而即使是流行的站点也没有实现本文中提到的11个最佳实践并且至少有一个错误。所以阅读这篇文章然后检查你的表单并通过使用HTML技术来改善你的用户体验。
一般来说登录和登录表单都非常简单。对于大多数网站来说它们只有两个输入框和一个提交按钮。但是即使这么简单的HTML结构许多网站仍然有一些小错误。
由于这种类型的表单很简单并且有很多出错的可能因此它们提供了一个很好的学习环境既可以学习一些新的HTML特性也可以掌握使用任何类型的表单生成最佳用户体验所需的技能。
考虑无密码流程替代电子邮件/密码
在我们开始实践之前注意: 在本文中我们将使用经典的电子邮件/密码表单作为示例。然而就安全性而言密码实际上是让用户登录的最糟糕的方式而且这种方法有许多众所周知的弱点。让我们快速看几个:
这份关于2018年verizon数据泄露的报道 的报告称超过70%的人在不同网站上重复使用密码。攻击者可能会在一个网站的一些泄露数据中找到跨网站共享的密码并用它来窃取另一个网站的帐户。此外与我们将在下面讨论的无密码选项相比将2FA作为解决方案实现会降低用户体验。用户经常忘记密码重置密码需要花费太多时间。根据传输安全公司的这份报告55%的用户因为登录过程过于复杂而放弃使用网站。
如果你想改进你的登录表单第一步应该是考虑无密码流程。
以下是我目前最喜欢的无密码实现:
不要使用DIY实现而是使用安全的、设计良好和维护良好的第三方解决方案比如Auth0或Amazon Cognito。对于我们的几个客户项目包括具有最高安全性要求的项目我们使用了其中一种方法进行身份验证。苹果和谷歌提出的新密钥标准。纽约时报的这篇演示和文章解释了它是如何工作的以及为什么它更好。实现带有登录链接的电子邮件(许多用户在每次登录时都使用记住密码功能)。
您还可以组合这些选项例如为使用新浏览器的用户使用passkey为没有passkey的用户使用登录链接。
解决了这些问题后让我们继续讨论登录和注册表单的11个最佳实践。(在阅读时请记住几乎所有这些指导方针也适用于任何类型的表单。)
1. 设置 autocomplete
- input typeemailinput typeemail autocompleteusername
- input typepasswordinput typepassword autocompletecurrent-passwordbuttonLogin/button密码管理器是降低电子邮件/密码表单安全风险的唯一选择(但即使它们也不能避免所有风险)。这就是为什么给密码管理器一个辅助是很重要的。
标签有一个非常有用的autocomplete属性。它还允许密码管理器区分登录表单(current-password)和注册表单(new-password)。
让我们一起来看看: labelNew password:
- input typepasswordinput typepassword autocompletenew-password/labellabelConfirm password:
- input typepasswordinput typepassword autocompletenew-password/labelbuttonSign Up/button如果你不知道你在做什么不要设置autocompleteoff !这样做可能会降低用户体验。只有当我们需要隐藏非常敏感的数据(比如医疗网站上的“症状”字段)时我们才应该使用这个设置。
2. 设置typeemail labelE-mail:
- input typetext autocompleteusernameinput typeemail autocompleteusername/label登录表单最常见的错误之一是在e-mail字段中使用typetext而不是typeemail。为什么这个属性很重要?
浏览器会在一个自动完成的弹出框中提示用户的电子邮件地址(即使用户是第一次打开一个网站)。在触摸设备上用户将会被提示使用一个专门为输入电子邮件而设计的、更舒适的键盘。它支持内置的电子邮件验证。
如果你不喜欢浏览器内置的验证不要设置typetext。相反使用novalidate属性。
3. 所有可点击项都应该使用button或a而不是div或span
- Forgot your password? spanReset it here/span.Forgot your password? a href/restoreReset it here/a.- divLogin/divbuttonLogin/button链接会改变当前页面我们应该对所有链接使用a。按钮不会改变页面的URL只会改变当前页面的状态;我们应该对所有按钮使用button。
与span onClick{…}相比使用a标签有很多好处。例如用户可以在新选项卡中打开链接或者在单击之前查看新的URL。
通过使用button而不是div你可以让你的网站更容易访问并改善键盘用户体验:屏幕阅读器会告诉用户什么时候他们正在处理一个按钮;按钮将具有:focus状态以改进键盘用户体验。
此外我们应该使用button来显示/隐藏密码功能;不要忘记aria-label标签如果你使用的是一个图标按钮:
button typebutton aria-labelShow passworddiv classeye-icon
/button这里还有一点:a和button也很适合用于开发目的。通过对交互元素使用a/button你可以更容易地为所有的交互元素创建一个CSS选择器:
button, a {cursor: pointer; /* Using pointer is controversial, this is just an example */
}4. 用form包裹字段和提交button
- divformlabelEmail: input typeemail autocompleteusername/labellabelPassword: input typepassword autocompletecurrent-password/labelbuttonLogin/buttonform
- /div
- buttonLogin/button确保将所有表单的字段及其提交button包装在form标签中。只有当字段位于 form 标签内并且只有一个提交按钮时使用Enter提交表单才有效。(此外使用屏幕阅读器的用户会喜欢这种实现提供的更好的导航。)
5. 避免使用placeholder替代label
- input placeholderE-mail typeemail autocompleteusernamelabelE-mail:input typeemail autocompleteusername/label创建placeholder属性是为了显示输入的示例而不是为了描述该输入。因此我完全不建议将它用作label标记的替代品。此外当用户输入数据时占位符值将被隐藏并且它们还经常存在对比度问题。
这对于简短的电子邮件密码表单来说不是那么明显但在较大的表单中占位符的问题就很明显了。
6. 用label标签包装复选框输入
- input typecheckbox I agree with the privacy policylabelinput typecheckbox 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 typeemail autocompleteusername
- classinvalidrequired aria-invalidtrue aria-errormessageemail-errordiv idemail-errorEnter a valid email address/divaria-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但只能隐藏输入过程中的错误。
下面是关于内联表单验证的一个很好的指南。
防止表单发送两次
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)
})用户经常会不小心双击而不是单击。因此为了防止显示一些服务器错误最好在表单提交时禁用该按钮。
使用AJAX时要考虑网络延迟和服务器/网络错误 form.addEventListener(submit, async () {
- await fetch(…)try {showLoader()await fetch(…)} catch (e) {showError(e)} finally {hideLoader()}})对于每个AJAX请求我们应该始终考虑两件事:
向用户显示加载状态。在本地开发期间您有0毫秒的延迟但是真实用户在服务器响应之前将有几秒钟的延迟因此用户应该在单击提交按钮后看到某种反馈。处理网络和服务器错误。你不会在本地开发中看到这种情况但在生产环境中每个用户都可能遇到WiFi连接失败或服务器出现Error 500错误;为它们做好准备并向用户显示一些适当的文本。
注意:对于授权表单最好通过页面重载提交表单因为它会将用户的token保存到httpOnly-cookie并更新web应用中的所有存储。
总结
设置autocomplete输入字段为输入字段选择正确的type所有可点击的元素都应该使用button或a而不是div或span用form标签内包裹输入字段和提交 button使用label描述input标签避免placeholder用label标签内包装复选框为UI设置可视:focus状态为屏幕阅读器标记无效字段阻止在输入中间进行验证阻止表单发送两次考虑网络延迟和服务器/网络错误
