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

Question

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

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

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

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

Answer 1

有许多内容可以“预期”（例如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！）提供。

Answer 2

这个问题很老了，但我有一个 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（用于注册和密码更改表单）

资源

Current WHATWG HTML Standard for autocomplete.
"Create Amazing Forms" from Google。似乎几乎每天都会更新。很好的阅读。
"Help Users Checkout Faster with Autofill" from Google。

Answer 3

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

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

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

3 个答案:

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

如何命名`<input>`代码

资源

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

3 个答案:

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

如何命名<input>代码

资源

如何命名`<input>`代码