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

时间：2012-02-13 21:30:52

标签： html google-chrome web autofill

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

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

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

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

3 个答案:

答案 0 :(得分：5)

有许多内容可以“预期”（例如RFC3106或hCard format中的内容）但最终归结为{{3}中可以找到的内容我估计} Chromium source。

此特定部分似乎是code，您可能会感兴趣，我现在可以通过Chromium's AutoFill implementation使用Google Code Search功能for Chromium找到它。

用于正则表达式的部分Google Code Project Hosting在autofill_regex_constants.h中定义，并在autofill_regex_constants.cc.utf8中以公平constants are extern-ed（即使支持I18N！）提供。

答案 1 :(得分：3)

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

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

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

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

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（用于注册和密码更改表单）

资源

答案 2 :(得分：0)

Chrome（v51.0）似乎实现了以下规范：https://html.spec.whatwg.org/multipage/forms.html#autofill

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

<强>示例： 

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

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

相关问题
最新问题