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

在学习了 form 元素 以及如何使表单 交互 之后,让我们看看如何帮助用户避免重复输入数据。

充分利用自动填充

填写表单可能很耗时。例如,在你想购买商品的每个网站上反复重新输入你的地址不是一个好的购物体验。

自动填充可以在这里帮助你。你输入一次你的地址。从现在开始,你的浏览器将为你提供自动填写其他表单的相同地址的选项。

你搬到了另一个城市?不必担心永远获得旧地址作为选项。你可以编辑浏览器为你保存的地址数据,以保持其为最新状态。

自动填充在浏览器中如何工作?

地址字段在不同的网站上看起来可能非常不同。浏览器如何知道它是一个地址字段?

浏览器使用启发式方法来识别地址字段。nametypeid 属性的值是什么?表单控件上是否存在 autocomplete 属性

基于此信息,浏览器可以提供使用之前输入的相同类型数据自动填充字段的选项。浏览器甚至可以提供自动填充整个表单。

帮助浏览器进行自动填充

让我们看看你可以做些什么来帮助浏览器提供正确的自动填充选项。

使用合理的属性值

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

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

你是否有一个字段,用户应该在其中输入他们的电子邮件地址?使用 email 作为 nameidtype 属性的值。这是浏览器识别这是一个电子邮件字段的三个提示。

autocomplete 属性

在其他示例中,浏览器仍然很难仅从 nameidtype 属性中识别数据类型。你可以通过使用 autocomplete 属性来提供帮助。

你是否在使用中的浏览器中输入过姓名?浏览器可能会为你提供再次在此演示中填写此字段的选项。

你可以在以后的模块中了解更多关于使用 autocomplete 和自动填充 的信息。

检查你的理解情况

测试你对自动填充的知识

自动填充是基于哪些属性提供的?

name 属性。
正确,浏览器会基于此属性以及其他属性提供自动填充。
type 属性
正确,浏览器会基于此属性以及其他属性提供自动填充。
autocomplete 属性
正确,浏览器会基于此属性以及其他属性提供自动填充。

资源