HTML | 自动完成属性

在HTML中，自动完成属性（Autocomplete）可以帮助用户在输入表单时快速输入和选择预定的数据，比如姓名、地址、邮编等。在本文中，我们将介绍如何使用HTML中的自动完成属性。

基础语法

使用自动完成属性可以通过以下方式：

<input type="text" autocomplete="[value]">

其中，[value]代表具体的自动完成值。常用的[value]值有：

• on： 自动完成是启用的。
• off：自动完成是禁用的。这是默认值。
• new-password：用户密码。
• current-password：当前密码。
• username：用户名。
• tel：电话号码。
• street-address：街道地址。
• country-name：国家/地区名称。
• postal-code：邮政编码。
• email：电子邮件地址。
• url：URL地址。
• cc-csc：信用卡安全码。
• cc-exp：信用卡过期日期。
• cc-exp-month：信用卡过期月份。
• cc-exp-year：信用卡过期年份。
• cc-name：信用卡拥有者姓名。

例子

以下是一个使用自动完成属性的简单例子：

<form>
  <label for="fname">名字：</label>
  <input type="text" id="fname" name="fname" autocomplete="given-name"><br><br>
  <label for="lname">姓氏：</label>
  <input type="text" id="lname" name="lname" autocomplete="family-name"><br><br>
  <label for="email"> 邮箱：</label>
  <input type="email" id="email" name="email" autocomplete="email"><br><br>
  <input type="submit">
</form>

在以上的例子中，<input> 元素的 autocomplete 属性设置分别为 given-name，family-name 和 email。这意味着在每个输入框中，浏览器会自动提供一个下拉列表以供选择相关的输入内容。

浏览器支持

自动完成属性目前被大部分现代浏览器支持。但请注意，不同的浏览器可能对自动完成属性有不同的实现方式。

总结

在本文中，我们了解了HTML中如何使用自动完成属性，并列举了常用的自动完成值。我们还提供了一个示例，您可以使用它来理解如何在表单中使用自动完成属性。现在您可以在自己的网站中使用这个功能来提高用户的输入效率了。