Chrome自动填充需要哪些属性？

Question

我希望将我们的网站与Chrome的地址自动填充相关联,但我找不到任何关于它如何呈现表单的参考.

我猜它正在寻找表格的名称=字段中非常具体的东西,但是一个好的参考将是好的,而不是必须逆向工程.

目前,Chrome没有填写任何表格,但Safari填充了大部分表格.有可能同时提出两个问题:任何人都可以参考野生动物园吗？Safari似乎正在使用我们的title = fields ...

它不使用这个标准,是吗？http://www.ietf.org/rfc/rfc3106.txt

Answer 1

有许多东西可以"预期"(比如RFC3106中的内容或hCard格式),但最终归结为你可以在Chromium 源 代码中找到的内容,我想.

这个特定的部分似乎是Chromium的自动填充实现可能对您感兴趣,我通过使用Google代码项目托管现在可以使用Chromium的Google代码搜索功能找到了该部分.

一些常量用于正则表达式的常量autofill_regex_constants.h在一个相当广泛的列表中定义并提供(即使支持I18N!)autofill_regex_constants.cc.utf8.

Answer 2

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

现在有关于如何触发自动完成的完整文档。

这是用于启用自动完成功能的官方当前 WHATWG HTML 标准的链接。

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

Google 编写了一份非常好的指南，用于开发对移动设备友好的 Web 应用程序。他们有一节介绍如何命名表单上的输入以轻松使用自动填充。即使它是为移动设备编写的，这也适用于桌面设备和移动设备！

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

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

• <label>对所有<input>字段使用 a
• autocomplete为您的<input>标签添加一个属性并使用本指南填写它。
• 为所有标签正确命名您的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>！此信息也可以在此处找到。

以下是命名输入的方法：

• 姓名
  • 将其中任何一个用于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 （用于注册和密码更改表格）

资源

• 当前用于自动完成的 WHATWG HTML 标准。
• 来自 Google 的“创建惊人的表单”。似乎几乎每天都在更新。优秀的阅读。
• 2015 年来自 Google 的“使用自动填充功能帮助用户更快地结帐”。