14

我希望将我们的网站与 Chrome 的地址自动填充功能联系起来，但我找不到任何关于它希望如何呈现表单的参考。

我猜它正在表单的 name= 字段中寻找一些非常具体的东西，但是一个好的参考会很好，而不是必须对其进行逆向工程。

目前，Chrome 没有填写我们的任何表单，但 Safari 填写了大部分表单。冒着同时问两个问题的风险：有人也有 safari 的参考资料吗？Safari 似乎正在使用我们的 title= 字段...

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

4

3 回答 3

6

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

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

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

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

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

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

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

  • 将 a<label>用于所有<input>字段
  • 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（用于注册和密码更改表格）

资源

于 2017-01-31T18:51:45.160 回答
5

有很多东西可能是“预期的”（比如RFC3106或hCard 格式中的东西），但最终归结为你可以在Chromium 源 代码中找到的东西，我猜。

您可能对这个似乎是 Chromium 的 AutoFill 实现的特定部分感兴趣，我通过使用Google Code Search功能发现了这一点，该功能现在可通过Google Code Project Hosting获得。

一些用于正则表达式的常量是在.autofill_regex_constants.hautofill_regex_constants.cc.utf8

于 2012-02-29T01:19:09.047 回答
0

看起来 Chrome (v51.0) 实现了以下规范：https ://html.spec.whatwg.org/multipage/forms.html#autofill

这意味着您可以autocomplete使用 Chrome 应填写的特定类型的值填充属性。

例子：

<input type="text" autocomplete="address-line1" id="a1" name="a1" />
<input type="text" autocomplete="address-line2" id="a2" name="a2" />
<input type="text" autocomplete="address-level2" id="city" name="city" />
<input type="text" autocomplete="address-level1" id="state" name="state" />
<input type="text" autocomplete="country-name" id="country" name="country" />

<input type="text" autocomplete="tel" id="phone" name="phone" />
<input type="text" autocomplete="email" id="email" name="email" />

（显然我已经省略了示例中的标签）

于 2016-07-12T19:06:59.480 回答