浏览器中的表单自动填充是如何工作的？

Question

autofill 表单如何在现代网络浏览器中工作？实现自动表单填充的浏览器中最常用的技术有哪些？

-- 编辑--

问题不是关于自动完成，而是关于表单自动填充，它不仅关心之前输入的值，还考虑要完成的字段的含义和结构。 Google Chrome 实现，例如，tries to parse the inputted fields 来猜测它们的类型和结构。或者至少是我从上面链接的代码中理解的。

Answer 1

看看kmote的this answer。

重点是浏览器查看该字段的name 标记，并有根据地猜测那里会发送什么样的数据（正则表达式匹配是一种很好的简单方法）。 Chrome 正在努力实现某种标准化，这样就不会那么顺利。

Answer 2

不同的技术和浏览器使用不同的方法来计算要显示的内容以及显示方式，但一些需要检查的来源是：

• Google's高层描述
• 如何使用 jQuery implement it（请注意，还有一个 jQuery 自动完成功能 plugin）。

如果您正在考虑自己实现它（或只是使用它），我强烈建议您查看该插件。

Answer 3

answer 的第一个元素就是几年前 Internet Explorer 引入的非标准 HTML 表单的 autocomplete 属性。

具有讽刺意味的是，您可以在此处阅读有关 Mozilla 网站的精彩历史介绍：The autocomplete attribute and web documents using XHTML

Answer 4

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

要触发自动完成功能，您只需正确命名即可。

以下答案来自我的原始答案：https://stackoverflow.com/a/41965106/1696153

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

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

如何在您的 HTML 表单上启用自动完成功能

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

• 为所有<input> 字段使用<label>
• 将autocomplete 属性添加到您的<input> 标记并使用此guide 填写。
• 为所有<input> 标签正确命名name 和autocomplete 属性

• 示例：

  <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> 标签

为了触发自动完成功能，请确保在 <input> 标记中正确命名 name 和 autocomplete 属性。这将自动允许在表单上自动完成。确保也有<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 年。