如何优化表单以利用自动填充

惊喜！ 借助自动填充功能，您可以让用户更轻松地在线购买您的产品。

这一定是你的幸运日。 或者，嗯，几年？

自动填充并不是新事物，尽管随着时间的推移它一直在改进。 然而，这是一种鼓励用户填写您的网络表单的绝妙方式——无论您是希望他们与您联系还是输入他们的付款信息，以便他们可以点击那个又大又漂亮的购买按钮。

自动填写表单可以消除繁琐、耗时和转换障碍的 Web 表单。 当您为用户自动填充表单数据时，您可以通过节省用户时间并减少出现错误（如拼写错误）的可能性来提供更好的用户界面和用户体验 (UX)。

它还使用户不必考虑太多，或者更糟的是，从舒适的沙发上站起来步行到钱包的可怕距离。

你可能会认为我们很戏剧化，但有时经过一整天的工作后，你的领导力已筋疲力尽而无法起床。 或者他们是一个忙碌的妈妈，他们认为他们会在 5 分钟的休息时间里快速购买，但突然间，他们没有时间了。

在一项研究中，谷歌发现激活自动填写表格后，用户填写表格的速度提高了 30%。 这种速度与自动填充的绝对便利性相结合，提高了表单提交率和转化率，同时让用户在此过程中感到满意。 快乐的用户是回头客。

这就是为什么自动功能在我们的表单设计最佳实践列表中。

那么，如何使自动填充在您的 Web 表单上工作？

这一切都始于让您的 Web 开发人员优化您的表单以与用户的浏览器一起使用，以便它可以识别您的表单字段。

自动填充如何工作？

我们从这里开始怎么样：首先什么是自动填充？

自动填充是大多数浏览器为其用户提供的漂亮工具。 当用户启用自动填充时，他们​​的浏览器将使用它保存的任何适用的用户数据自动为他们填写表单。 因此，用户不必手动填写每个字段。

不同的浏览器保存的用户数据略有不同，但总体上相似：

注意：“地址”包括电话号码、电子邮件地址和送货地址。

现在，自动填充如何发挥它的魔力？

这很简单。 浏览器收集用户在其他网站或您自己的网站上输入过往表格的信息。 一些用户甚至可以在浏览器的自动填充设置中设置自动填充并直接提供信息以使生活更轻松。 在这种情况下，浏览器可以通过身份验证程序保存敏感数据，例如支付方式。

用户通过他们的自动填充设置来控制他们的自动填充首选项，并且可以选择启用或禁用它。

只要启用它，他们的浏览器就会使用几种启发式方法来确定它可以根据用户权限自动填充哪些表单字段。

如何将自动表单填写添加到您的 Web 表单

你准备好接受一些好消息了吗？

只要您使用表单最佳实践构建 Web 表单，自动填充通常是给定的，因为主要功能已融入用户的浏览器或设备。 因此，您只需要专注于开发符合编码标准的表单即可。 管理它，自动填充应该适用于您的移动和桌面表单。

如果没有，Google 会给出自动填充可能对用户不起作用的两个原因：

1. 1. 您的网站可能不够安全，Chrome 无法提供用户数据。
   2. 如果您的网站是安全的，Chrome 可能无法检测到您的表单字段。

为防止您的 Web 表单出现这些问题，请确保您的网站足够安全以符合浏览器标准。 设置安全指南，更新您的网站和软件，使用防火墙和 VPN 并防止数据孤岛。

如果您的网站是安全的并且自动填充无法自行运行，请确认您的表单遵循以下表单代码最佳做法。

形成保证自动填充工作的最佳实践

虽然浏览器发挥了魔力让用户的生活更轻松，但您还是有一些方法可以帮助他们。 通过开发为浏览器提供正确提示的 Web 表单，您可以保证它能够为您的用户自动填充表单数据。

首先向浏览器提示它应该使用哪种数据填充表单字段，以便浏览器更容易读取表单并完成其工作。

为此，请确保使用正确的输入类型和相应的输入标签。 您还需要为每个输入元素提供名称属性和自动完成属性。 下图显示了根据您可能需要的 HTML 标准的通用名称和自动完成属性。

来自谷歌开发者的照片。

为了遵守标准的 HTML 表单实践，您或您的网站开发人员还应确保将输入元素包装在 <form> 标记中以启用自动填充。 Google Chrome 网络浏览器要求表单字段位于 HTML 表单标记中，否则它只会提供建议而不会自动填充表单数据。

不该做什么：防止自动填充的做法

虽然一些做法可以帮助浏览器自动填充表单数据，但其他做法会阻碍。 创建表单时，请确保您：

• • 避免字段验证陷阱，例如客户端验证
  • 使用标准输入字段而不是创建您自己的字段
  • 在输入字段中使用占位符属性而不是假占位符
  • 不要将送货地址复制到帐单地址中
  • 确保您的表单与密码管理器一起使用
  • 有时，在自动填写表单时，浏览器数据并不是唯一的帮助。

用户已经厌倦了跟踪一百万个密码，你能责怪他们吗？ 没有什么比猜测密码更糟糕的了，直到您被锁定帐户或放弃并重置密码只是被告知您不能使用当前密码。 （你不是已经试过了吗？！）

反过来，在一个地方跟踪所有用户名和密码的密码管理器越来越受欢迎。 这些管理器中最好的，如 LastPass 和 1Password，具有在登录表单中自动填充密码的能力。

对于网站所有者，这意味着确保您的登录表单与密码自动填充应用程序一起使用。

幸运的是，密码管理器会自行连接到正确构建的表单中——就像浏览器一样。 按照上面的表单提示，您的表单应该与 LastPass 和 1Password 无缝协作。

但是，与浏览器一样，您可以通过多种方式帮助密码管理员阅读您的表单并保证其正常运行：

• • 不要使用动态添加或删除字段的登录表单
  • 在网页的第一个渲染中显示您的表单
  • 按预期使用占位符属性
  • 尽可能避免使用多页登录表单

如何自动填充：其他提示

说到用户体验，满足用户期望是最低要求，超越期望是目标。 有时这意味着实现表单布局的灵活性以适应用户期望的差异。

在自动填充功能的情况下，创建灵活的表单布局对于在多个国家开展业务或为多个国家/地区的消费者提供服务的企业至关重要，因为世界各地的人们写地址的方式不同。 为了适应这些用户的期望和浏览器，考虑提供一个灵活的表单来相应地调整地址字段。

为应用程序设置自动填充表单

创建用户将在 Apple 设备上访问的应用程序时，请确保您的应用程序支持 Apple 的密码自动填充功能，并按照此处的说明设置应用程序的关联域：

iOS 自动填充要求

对于 Android 设备上的应用，只要您的应用使用标准视图，Android 自动填充框架就会自动填充表单。 您可以通过完成自动填充工作流程、设置关联域、将字段标记为重要以及使用 android:autofillHints 属性来优化您的应用在框架内的工作方式，如下所述：

Android自动填充操作及说明

在转化中获得感谢

确保您的表单与浏览器和密码管理器的自动填充功能配合良好，是增强表单用户体验和减少表单提交摩擦的最佳方法之一。 谁不喜欢用一半（或更少！）的努力获得相同的结果？

自动填充通过使表单更快、更简单地完成来让用户的生活更轻松，这意味着用户可以获得他们正在寻找的内容，而您可以获得更多的转化。

而且，在我们看来，转化是用户表达感谢的最佳方式。

有兴趣让您的表单为之而死（又名快速、华丽、用户友好并针对自动填充表单数据进行了优化）？ 我们的团队对所有这些都充满热情，我们喜欢交谈。 伸手。