resultmap type属性值_【第1858期】通过HTML属性可改善用户的双重身份验证体验

最新推荐文章于 2025-06-05 15:36:06 发布

weixin_39870413

最新推荐文章于 2025-06-05 15:36:06 发布

阅读量170

点赞数

CC 4.0 BY-SA版权

文章标签： resultmap type属性值

本文链接：https://blog.csdn.net/weixin_39870413/article/details/111613234

文章介绍了如何利用HTML属性提升用户双重身份验证体验。通过inputmode属性改变浏览器显示的键盘，pattern属性验证内容并触发数字键盘，autocomplete属性实现自动填写一次性密码等。还提及Chrome团队相关实验，指出用HTML属性可改善登录体验，尤其在移动设备上。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

前言

合适的场景，提供给用户合适的键盘。今日早读文章由@排骨翻译分享。

正文从这开始～～

在用户登录输入双重身份验证代码时，在用户体验方面存在很多冲突的可能。作为开发人员，在不能降低用户体验的前提下，应该构建支持帐户安全需求。但有时候感觉这些需求好像是一场相互之间的战争。

在这篇文章中，看看简单的元素和HTML属性将有助于我们提高用户的双重身份验证体验。

默认体验

当你为Web应用程序实现双重身份验证(可能使用 Authy 双重身份验证 API)时，用户需要一份表单让输入一次性的密码，然后提交。你可以创建类似于以下HTML的内容：

action="/sessions/check-2fa" method="POST">

for="token">Please enter the code you were sent:

type="text" name="token" id="token" />

type="submit">Check token

这已经是一个很好的经验了。具有name和唯一ID，使用正确的for属性显式与其关联，这对可访问性很重要。为了达到同样的效果，你还可以将内嵌标签。使用一点 CSS时，这可能如下所示：

然而，我们可以通过增加几个属性来逐步增强这种体验。

获得正确的键盘

对于带屏幕键盘的手机或设备，首先需要注意的是，我们正在展示完整的虚拟键盘。一次性密码是由数字字符组成，因此最好给用户显示一个数字键盘。

你可能会认为，将的类型从"文本"切换到"数字"就可以解决：

type="number" name="token" id="token" />

但是你错了。这确实触发了iOS上的另一个键盘，但它仍然包含了一些无用的键。

改变字段的类型会改变浏览器解释该字段的方式，但也可能导致错误; 如果双重认证代码以0开头，数字字段可能会去掉前导的0。

输入模式

Inputmode属性改变了浏览器应该显示的键盘，而不改变字段的数据含义。我们希望从数字键盘输入。因此，改为添加输入模式“ numeric”

type="text" name="token" id="token" inputmode="numeric" />

Inputmode还有许多其他值，包括电话号码的“tel”、“email”、“decimal”、“url”、“search”和“ none” ，以便在需要呈现自己的键盘时使用。关于 CSS Tricks 的这篇文章提供了不同输入模式所需的所有细节。

对支持inputmode的浏览器来说是很友好的，但是几年前还是一片空白。对于较老的浏览器，还有另外一个技巧可以触发数字键盘，并免费提供一些额外的验证。

模式

Pattern属性允许你使用正则表达式来验证的内容。使用模式[0-9]*告诉浏览器只接受字段中的数字，并在不支持输入模式的浏览器中触发数字键盘。

我们的 HTML 现在如下所示：

type="text"

name="token"

id="token"

inputmode="numeric"

pattern="[0-9]*"

/>

键盘是一个更简单的数字输入：

有一件事可以让填写的表格变得更加容易，那就是自动填写一次性密码。

HTML 自动完成

按照MDN的说法，允许Web开发人员在指定用户代理填写表单字段值时必须提供自动帮助的任何权限，以及浏览器关于该字段中预期信息类型的指导。

在iOS和macOS上的Safari浏览器中，可以利用这个优势，让浏览器提供双重认证代码，这些代码通过短信发送到设备上，属性值为“one-time-code”的autocomplete属性将触发此行为。

type="text"

name="token"

id="token"

inputmode="numeric"

pattern="[0-9]*"

autocomplete="one-time-code"

/>

有了这个，我们的就完整了，现在用户体验如下所示：

其他有用的自动补全值

有许多可用的自动补全值，它涵盖了从姓名、地址到信用卡和其他帐户详细信息的一切内容。对于注册和登录表单，一些有用的自动补全值提示: username, email, new-password, current-password。

在网页上，对浏览器和密码管理器查找登录表单有很好的启发式作用，但是使用 usename和 current-password使它变得非常明显。如果你要在不同的页面上使用用户名和密码构建登录表单，那么你肯定需要考虑使用这些属性。

在注册表单中，确保使用“new-password”值，因为它在某些浏览器中会触发密码建议。

在其他浏览器中自动完成一次性密码

这种自动完成的行为目前只存在于iOS和macOS上的Safari中，但是Chrome团队正在研究类似的想法来简化这个过程。目前有一个模仿安卓的短信接收API的实验。这将允许开发者从短信中提取一次性密码，并且，因为它是JavaScript的，可以立即提交表单，为用户节省更多的时间。

在编写本API的时候，这个API是原始版本测试的一部分，它允许你测试并反馈给 Chrome 团队。如果您对此感兴趣，请注册并尝试 API。

通过 HTML 获得更好的体验

在这篇文章中，我们已经看到，只需要一些 HTML 属性，我们就可以改善用户的登录体验，尤其是在移动设备上。

元素是我们可以访问的最有趣的HTML元素之一。根据属性，它可以是文本字段、范围滑块、文件选择器、按钮等等。

如果您正在寻找更好的双重身份验证体验，那么请查看 Authy 推送身份验证，它完全减少了代码的复制。

关于本文译者：@排骨作者：@PHIL NASH 原文：https://www.twilio.com/blog/html-attributes-two-factor-authentication-autocomplete

为你推荐

【第1826期】HTML5 之跨域通讯(postMessage)

【第1693期】被验证过的 Code Review 最佳实践

【第1800期】利用过渡动效打造沉浸式的体验 —【Web篇】