javascript - 自动完成 HTML 表单

Question

我正在寻找有关表单字段自动完成的答案。

如何自动填写名字、姓氏、地址等常见输入？

在 Chrome 中，如果用户拥有 Google 个人资料，则可以自动填充字段。

看来 IE 提供了类似的功能:

(来自 MS 网站)“您可以使用自动完成功能来存储您在 Web 表单字段中键入的密码和其他信息。当您打开自动完成功能时，Internet Explorer 会自动填写您经常在 Web 表单中键入的字段，例如您的姓名和地址。”

有什么方法可以确保自动填充发生，跨浏览器，使用 HTML/JS？

Answer 1

这个问题已经很老了，但我有一个2017 年的更新答案!

现在是关于如何命名您的<input> 的跨浏览器标准。标签以触发自动完成。

Here's a link to the official current WHATWG HTML Standard for enabling autocomplete.

Google 写了一个 pretty nice guide用于开发对移动设备友好的 Web 应用程序。他们有一个部分介绍如何命名表单上的输入以轻松使用自动填充。虽然它是为移动设备编写的，但它适用于桌面和移动设备!

如何在 HTML 表单上启用自动完成

以下是有关如何启用自动完成的一些要点:

• 使用 <label>对于你所有的<input>字段
• 添加 autocomplete属性给你的<input>标记并使用此 guide 填写.
• 命名您的 name和 autocomplete所有 <input> 的正确属性标签

• 示例:

  <label for="frmNameA">Name</label>
  <input type="text" name="name" id="frmNameA"
  placeholder="Full name" required autocomplete="name">
  
  <label for="frmEmailA">Email</label>
  <input type="email" name="email" id="frmEmailA"
  placeholder="name@example.com" required autocomplete="email">
  
  <!-- note that "emailC" will not be autocompleted -->
  <label for="frmEmailC">Confirm Email</label>
  <input type="email" name="emailC" id="frmEmailC"
  placeholder="name@example.com" required autocomplete="email">
  
  <label for="frmPhoneNumA">Phone</label>
  <input type="tel" name="phone" id="frmPhoneNumA"
  placeholder="+1-555-555-1212" required autocomplete="tel">
  

如何命名您的 <input>标签

为了触发自动完成，请确保正确命名 name和 autocomplete <input> 中的属性标签。这将自动允许在表单上自动完成。确保还有一个 <label> !也可以找到此信息here .

以下是如何命名您的输入:

• 名字
  • 将这些中的任何一个用于 name : name fname mname lname
  • 将这些中的任何一个用于 autocomplete :
    • name (全名)
    • given-name (名字)
    • additional-name (中间名)
    • family-name (姓氏)
  • 示例:<input type="text" name="fname" autocomplete="given-name">
• 电子邮件
  • 将这些中的任何一个用于 name : email
  • 将这些中的任何一个用于 autocomplete : email
  • 示例:<input type="text" name="email" autocomplete="email">
• 地址
  • 将这些中的任何一个用于 name : address city region province state zip zip2 postal country
  • 将这些中的任何一个用于 autocomplete :
    • 对于一个地址输入:
      • street-address
    • 对于两个地址输入:
      • address-line1
      • address-line2
    • address-level1 (州或省)
    • address-level2 (城市)
    • postal-code (邮政编码)
    • country
• 电话
  • 将这些中的任何一个用于 name : phone mobile country-code area-code exchange suffix ext
  • 将这些中的任何一个用于 autocomplete : tel
• 信用卡
  • 将这些中的任何一个用于 name : ccname cardnumber cvc ccmonth ccyear exp-date card-type
  • 将这些中的任何一个用于 autocomplete :
    • cc-name
    • cc-number
    • cc-csc
    • cc-exp-month
    • cc-exp-year
    • cc-exp
    • cc-type
• 用户名
  • 将这些中的任何一个用于 name : username
  • 将这些中的任何一个用于 autocomplete : username
• 密码
  • 将这些中的任何一个用于 name : password
  • 将这些中的任何一个用于 autocomplete :
    • current-password (用于登录表格)
    • new-password (用于注册和密码更改表格)

资源

• Current WHATWG HTML Standard for autocomplete.
• "Create Amazing Forms" from Google .好像几乎天天更新。优秀的阅读。
• "Help Users Checkout Faster with Autofill" from Google 2015 年。