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

表单在现代web浏览器中是如何工作的？在实现自动表单填充的浏览器中，最常用的技术是什么

--编辑--

---

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

答案的第一个元素就是非标准HTML表单的

autocomplete

属性，它是几年前在Internet Explorer中引入的

---

具有讽刺意味的是，您可以在这里阅读mozilla网站上的一篇优秀历史介绍：

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

• 高级描述
• 如何使用jQuery（请注意，还有一个jQuery自动完成）

如果你想自己实现它（或只是使用它），我强烈建议你看看这个插件。

看看kmote

---

重点是浏览器查看字段的

名称

标记，并根据知识猜测哪些类型的数据将进入该字段（正则表达式匹配是一种很好的简单方法）。Chrome正在努力实现某种标准化，这样就不会一帆风顺了。

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

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

下面的答案来自我的原始答案：

谷歌为开发对移动设备友好的web应用程序写了一份报告。他们有一节介绍如何命名表单上的输入，以便轻松使用自动填充。尽管它是为移动设备编写的，但它同时适用于桌面和移动设备

如何在HTML表单上启用自动完成 以下是有关如何启用自动完成的一些要点：

• 对所有
  字段使用

• 在您的
  标签中添加一个

  自动完成

  属性，并使用此属性进行填充
• 为所有
  标记正确命名您的

  名称

  和

  自动完成

  属性
• 示例：

  <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">
  

  名称
  电子邮件
  确认电子邮件
  电话
  

如何命名您的

标签 要触发自动完成，请确保在

标记中正确命名

名称

和

自动完成

属性。这将自动允许表单上的自动完成。还要确保有一个

！也可以找到这些信息

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

• 名字
  • 对
    使用以下任一选项：

    name fname mname lname

  • 将其中任何一项用于自动完成：

    • 名称

      （全名）

    • 给定名称

      （用于名字）

    • 附加名称

      （用于中间名称）

    • 姓

      （姓氏）
  • 示例：

• 电子邮件
  • 对于

    名称
    ：
    电子邮件
    

  • 将其中任何一项用于

    自动完成

    ：

    电子邮件

  • 示例：

• 地址
  • 将其中任何一项用于

    名称

    ：

    地址城市地区省州邮编zip2邮政国家

  • 将其中任何一项用于自动完成：
    • 对于一个地址输入：

      • 街道地址

    • 对于两个地址输入：

      • 地址行1

      • 地址行2

    • 地址级别1

      （州或省）

    • 地址级别2

      （城市）

    • 邮政编码

      （邮政编码）

    • 国家/地区

• 电话
  • 将其中任何一项用于

    名称
    ：
    手机国家/地区代码交换后缀ext

  • 将其中任何一项用于自动完成：

    电话

• 信用卡
  • 对于

    名称

    ：

    ccname卡号cvc ccmonth ccyear exp日期卡类型

  • 将其中任何一项用于自动完成：

    • cc名称

    • cc编号

    • cc csc

    • cc exp月

    • cc exp year

    • cc exp

    • cc类型

• 用户名
  • 将其中任何一项用于

    名称
    ：
    用户名
    

  • 将其中任何一项用于自动完成：

    用户名

• 密码
  • 将其中任何一项用于

    名称
    ：
    密码
    

  • 将其中任何一项用于自动完成：

    • 当前密码

      （用于登录表单）

    • 新密码

      （用于注册和密码更改表单）

资源

• 。几乎每天都在更新。读得好
• 2015年

---

第一个链接是自动完成，而不是自动填充？另一个问题回答得很好：太好了@Akroy！请使用此链接创建答案，我将接受它。如果我检测到自动填充功能正在使用错误信息自动填充字段，会发生什么情况？如何调试