帮助用户避免在表单中重复输入数据

在了解了 form 元素以及如何创建表单 互动式 我们来看看如何帮助用户避免重复输入数据

填写表单可能非常耗时。 例如,在您想购物的每个网站上反复地重新输入您的地址,就不是好的购物体验。

自动填充功能可助您一臂之力。 您需输入一次地址。 从现在起,您的浏览器会为您自动填写其他表单的同一地址。

您搬到了另一个城市? 不必再担心无法永久保留旧地址。 您可以修改浏览器为您保存的地址数据,使其保持最新状态。

自动填充功能如何在浏览器中运行?

不同网站上的地址字段可能会截然不同。 浏览器如何知道这是地址字段?

浏览器使用 以确定地址字段。 nametypeid 属性的值是什么? 表单控件上是否有 autocomplete 属性

根据这些信息 浏览器可以提供相应选项,让您使用以前输入的相同类型的数据自动填充字段。 浏览器甚至可以自动填充整个表单。

帮助浏览器使用自动填充功能

让我们看看您可以采取哪些措施来帮助浏览器提供正确的自动填充选项。

使用合理的属性值

正如您所了解的,浏览器可以通过查看表单控件的属性来识别数据类型。

<label for="email">Email</label>
<input type="email" name="email" id="email">

您是否有供用户输入电子邮件地址的字段? 使用 email 作为 nameidtype 属性的值。 提示浏览器表明这是电子邮件字段的三个提示。

autocomplete 属性

在其他示例中,浏览器仍然可能很难仅通过 nameidtype 属性识别数据类型。 您可以使用 autocomplete 属性来实现此目的。

您以前在所用的浏览器中输入过名称吗? 在演示中,浏览器可能会为您提供重新填写此字段的选项。

您可以详细了解如何使用 自动补全和自动填充

检查您的理解情况

测试您对自动填充功能的掌握情况

根据哪些属性提供自动填充功能?

type 属性
以上都对
name 属性。
autocomplete 属性

资源