自动完成HTML表单

Question

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

如何自动填写常用输入，如名字，姓氏，地址..？

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

IE似乎提供了类似的功能：

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

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

Answer 1

这个问题很老了，但我有一个 2017年更新答案！

现在 IS 是一个跨浏览器标准，介绍了如何命名<input>代码以触发自动填充。

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

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

如何在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。似乎几乎每天都会更新。很好的阅读。
2015年
• "Help Users Checkout Faster with Autofill" from Google。

Answer 2

没有跨浏览器方式来执行此操作，浏览器支持HTML5和自动填充，或者它没有。

要使其正常工作，您需要使用输入的正确名称，浏览器将处理其余的，并且您无法访问浏览器存储的任何数据。

<input type="text" name="fname" /> //first name
<input type="text" name="lname" /> //last name
<input type="text" name="email" /> //email
//etc...

FIDDLE

根据this answer，Chrome使用的正则表达式如下：

• 名字：“first。* name |姓名缩写| fname | first $”
• 电子邮件：“e.?mail”
• 地址（第1行）：“地址。* line | address1 | addr1 | street”
• zipcode：“zip | postal | post。* code | pcode | ^ 1z $”

只要您的名字可以与这些正则表达式匹配，自动填充功能就可以在大多数浏览器中使用。

Answer 3

您可以为表单或每个表单字段添加自动填充功能。试试这个

<form autocomplete="on">
<input type="text" name="foo" />
....

</form>