💪第6期第5题：HTML5中的自动完成功能autocomplete是做什么的？

[LinDaiDai]

HTML5中的自动完成功能autocomplete是做什么的？

大家在听到自动完成这个词，会有一点迷糊，自动完成什么？

其实这个功能的作用是这样的：

首先，autocomplete是一个属性，这个属性可以设置在form标签上，也可以设置在其它的input标签上。

被设置了自动完成的标签，会允许浏览器预测对字段的输入。也就是说浏览器会根据你在这个输入框中已经输入过的值，留有一个"历史记录"，方便我们下次还想要输入同样的值。

例如下面这段代码：

<form autocomplete="on">
  testaccount: <input type="text" name="testaccount" /><br />
  testpassword: <input type="text" name="testpassword" autocomplete="off" /><br />
  <input type="submit" />
</form>

• 我把form标签的autocomplete打开，那么这个表单下的所有元素都开启了autocomplete
• 接着我把testpassword这一项的autocomplete关闭。

此时testaccout是有自动完成功能的，而testpassword没有。那么当我们第一次在这两个输入框中输入了内容并提交后。再次点击testaccout输入框，就会出现我们上一次输入并提交的那个值，而点击testpassword时却没有。

效果如下：

所以我们来做下总结吧😊：

• autocomplete属性规定输入字段是否应该启用自动完成功能；
• 它的默认值是启用，也就是"on"，另一个值是"off"关闭；
• 作用是：允许浏览器预测对字段的输入。当用户在字段开始键入时，浏览器基于之前键入过的值，应该显示出在字段中填写的选项。
• autocomplete 属性适用于 <form>，以及下面的 <input> 类型：text, search, url, telephone, email, password, datepickers, range , color。