HTML | DOM 表单自动完成属性(1)

📌 相关文章

📜 HTML | DOM 表单自动完成属性(1)

📅 最后修改于: 2023-12-03 15:15:37.184000 🧑 作者: Mango

HTML | DOM 表单自动完成属性

当我们在浏览网站或应用时，经常会遇到我们在填写表单时所填过的信息，随着输入的自动显示出来，这就是表单自动完成（Autocomplete）属性所实现的。本文将为你介绍HTML | DOM表单自动完成属性。

Autocomplete属性

Autocomplete属性用于控制浏览器是否应启用自动完成功能。它是在form, input和textarea标签之间设置的。当表单中有一个文本输入框时，浏览器就会默认启用自动完成属性。

Autocomplete属性有两种状态：

Autocomplete="on" （默认状态）,浏览器会启用自动完成功能。
Autocomplete="off" ，浏览器不会启用自动完成功能。

通常情况下，autocomplete属性设置为“off”可以增加平台兼容性，提高应用安全性；当然，也可以设置为“on”，使表单更加友好和便捷。

Autocomplete属性值

Autocomplete 属性可以使用以下属性值：

on: 浏览器将启用自动完成功能。这是默认值。
off: 浏览器不启用自动完成功能。
name: 浏览器将仅基于字段名自动完成表单。
honorific-prefix: 浏览器将基于公认的人名缩写自动完成表单。
given-name: 浏览器将基于名字自动完成表单。
additional-name: 浏览器将基于中间名自动完成表单。
family-name: 浏览器将基于姓氏自动完成表单。
honorific-suffix: 浏览器将基于尊称缩写自动完成表单。
nickname: 浏览器将基于昵称自动完成表单。
email: 浏览器将基于邮箱地址自动完成表单。
username: 浏览器将基于用户名自动完成表单。
new-password: 浏览器将基于密码自动完成表单（可以用于修改密码的场景）。
current-password: 浏览器将基于密码自动完成表单（适用于登录场景）。
one-time-code: 浏览器将基于一次性代码自动完成表单。
organization-title: 浏览器将基于职务自动完成表单。
organization: 浏览器将基于组织名自动完成表单。
street-address: 浏览器将基于街道地址自动完成表单。
address-line1: 浏览器将基于一行地址自动完成表单。
address-line2: 浏览器将基于二行地址自动完成表单。
address-line3: 浏览器将基于三行地址自动完成表单。
address-level1: 浏览器将基于一级行政区域（例如省份）自动完成表单。
address-level2: 浏览器将基于二级行政区域（例如市）自动完成表单。
address-level3: 浏览器将基于三级行政区域（例如县）自动完成表单。
address-level4: 浏览器将基于四级行政区域自动完成表单。
country: 浏览器将基于国名自动完成表单。
country-name: 浏览器将基于国名自动完成表单。
postal-code: 浏览器将基于邮政编码自动完成表单。
cc-name: 浏览器将基于持卡人姓名自动完成表单。
cc-given-name: 浏览器将基于持卡人名字自动完成表单。
cc-additional-name: 浏览器将根据持卡人中间名自动完成表单。
cc-family-name: 浏览器将根据持卡人姓氏自动完成表单。
cc-number: 浏览器将基于信用卡号自动完成表单。
cc-exp: 浏览器将基于信用卡有效期自动完成表单。
cc-exp-month: 浏览器将基于信用卡有效期月份自动完成表单。
cc-exp-year: 浏览器将基于信用卡有效期年份自动完成表单。
cc-csc: 浏览器将基于信用卡安全码自动完成表单。
cc-type: 浏览器将基于信用卡类型自动完成表单。
transaction-currency: 浏览器将基于交易货币自动完成表单。
transaction-amount: 浏览器将基于交易金额自动完成表单。
language: 浏览器将基于语言名称自动完成表单。
bday: 浏览器将基于生日自动完成表单。
bday-day: 浏览器将基于生日天自动完成表单。
bday-month: 浏览器将基于生日月份自动完成表单。
bday-year: 浏览器将基于生日年份自动完成表单。
sex: 浏览器将基于性别自动完成表单。
url: 浏览器将基于url地址自动完成表单。
photo: 浏览器将基于相片地址自动完成表单。

在输入标签中使用 Autocomplete属性

我们将通过以下示例演示如何在输入标签中使用Autocomplete属性：

<form autocomplete="on">
  <label>Username:</label>
  <input type="text" placeholder="Enter your username" autocomplete="unique">
  <br><br>
  <label>Password:</label>
  <input type="password" placeholder="Enter your password" autocomplete="new-password">
  <br><br>
  <label>Email:</label>
  <input type="email" placeholder="Enter your email" autocomplete="email">
  <br><br>
  <label>Address:</label>
  <input type="text" placeholder="Enter your address" autocomplete="street-address">
  <br><br>
  <label>City:</label>
  <input type="text" placeholder="Enter your city" autocomplete="address-level2">
  <br><br>
  <label>Country:</label>
  <input type="text" placeholder="Enter your country" autocomplete="country-name">
  <br><br>
  <input type="submit" value="Submit">
</form>

在上面的示例中，我们为每个输入标签设置了Autocomplete属性的相应值。我们为用户名设置了“unique”，这意味着浏览器将使用自己的方式来生成唯一的输入值。密码字段有“new-password”，因为当用户想要更改密码时，浏览器应该提示他们输入新密码。在电子邮件字段中，浏览器将预测用户的电子邮件地址。在地址和城市字段中，浏览器将启用自动补全。

在select标签中使用 Autocomplete属性

<form autocomplete="on">
  <label>Country:</label>
  <select name="country" autocomplete="country">
    <option value="India">India</option>
    <option value="China">China</option>
    <option value="Japan">Japan</option>
    <option value="USA">USA</option>
  </select>
  <br><br>
  <input type="submit" value="Submit">
</form>

在上面的示例中，我们将<select>标签的Autocomplete属性设置为“country”。

使用javascript和DOM检索autocomplete属性

我们可以使用JavaScript和DOM来检索属性值。以下是示例代码：

<!DOCTYPE html>
<html>
<body>
  <form id="myForm" autocomplete="on">
    <label>Username:</label>
    <input type="text" placeholder="Enter your username" autocomplete="unique">
    <br><br>
    <input type="submit" value="Submit">
  </form>
  <p>Click the button to show the autocomplete attribute of the input element in the form.</p>
  <button onclick="myFunction()">Try it</button>
  <p id="demo"></p>
  <script>
    function myFunction() {
      var x = document.getElementById("myForm").elements[0].autocomplete;
      document.getElementById("demo").innerHTML = "Autocomplete attribute: " + x;
    }
  </script>
</body>
</html>

在上面的示例中，我们使用JavaScript和DOM来从登录表单的第一个输入标签中检索autocomplete属性值。点击按钮以查看属性的值。

结论

在本文中，我们学习了如何为浏览器的自动完成功能指定autocomplete属性值，以及如何使用JavaScript和DOM来检索该属性的值。自动补全功能可以极大地提高Web应用程序的用户体验。