【问题标题】：How to trigger Autofill in Google Chrome?如何在谷歌浏览器中触发自动填充？
【发布时间】：2011-11-05 14:16:05
【问题描述】：

我想知道是否有某种特殊标记可以为特定表单启用 Chrome 自动填充功能。我只发现有关如何禁用它的问题，但我想知道是否可以在 html 代码中添加某种标记以告诉浏览器“这是地址的输入”或“这是邮政编码字段”以正确填写（假设用户激活了此功能）。

【问题讨论】：

标签： html google-chrome autofill

【解决方案1】：

2017 年更新： 看起来 Katie 的回答比我的提供了更多最新信息。未来的读者：投票给her answer。

这是一个很好的问题，而且文档出奇地难以获得。实际上，在许多情况下，您会发现 Chrome 自动填充功能“正常工作”。例如，以下 html 的 sn-p 生成一个表单，至少对我而言（Chrome v. 18），在单击第一个字段后会自动填写该表单：

<!DOCTYPE html>
<html>
<body>    
<form method="post">
  First name:<input type="text" name="fname" /><br />
  Last name: <input type="text" name="lname" /><br />
  E-mail: <input type="text" name="email" /><br />
  Phone: <input type="text" name="phone" /><br />
  Address: <input type="text" name="address" /><br />
</form>
</body>
</html>

但是，这个答案并不令人满意，因为它将解决方案留在了“魔法”领域。深入挖掘后，我了解到 Chrome（和其他支持自动填充的浏览器）主要依靠上下文线索来确定应填充到表单元素中的数据类型。此类上下文线索的示例包括输入元素的name、元素周围的文本以及任何占位符文本。

然而，最近，Chrome 团队承认这是一个不能令人满意的解决方案，并且他们已经开始在这个问题上推动标准化。来自谷歌站长组的A very informative post最近讨论了这个问题，解释说：

不幸的是，到目前为止，网站管理员很难确保 Chrome 和其他表单填写提供商能够正确解析他们的表单。存在一些标准；但它们给网站的实施带来了繁重的负担，因此在实践中并没有太多使用。

（他们所指的“标准”是上面 Avalanchis 的回答中提到的a more recent verion of the spec。）

Google 帖子继续描述了他们提出的解决方案（在帖子的 cmets 中遭到了重大批评）。他们建议为此使用一个新属性：

只需向输入元素添加一个属性，例如电子邮件地址字段可能如下所示：

<input type=”text” name=”field1” x-autocompletetype=”email” />

...x- 代表“实验性”，如果 & 当它成为标准时将被删除。阅读the post了解更多细节，或者如果你想更深入地挖掘，你会发现更完整的提案解释on the whatwg wiki。

更新： 正如这些insightful answers 中所指出的，Chrome 用来识别/识别公共字段的所有正则表达式都可以在autofill_regex_constants.cc.utf8 中找到。因此，要回答原始问题，只需确保您的 html 字段的名称与这些表达式匹配。一些例子包括：

名字： "first.*name|initials|fname|first$"
姓氏： "last.*name|lname|surname|last$|secondname|family.*name"
电子邮件： "e.?mail"
地址（第 1 行）： "address.*line|address1|addr1|street"
邮编： "zip|postal|post.*code|pcode|^1z$"

【讨论】：

另外，你必须提交一个完整的
-带有“action”和“method”的标签
虽然这可能与我的测试有关，但只有我在下面概述的方法实际有效。
我猜自动填充正则表达式常量不是它唯一使用的东西，它还可以记住来自自定义命名输入的东西。
在这个答案中使用了 url，它被破坏了。现在可以使用：code.google.com/p/chromium/codesearch#chromium/src/components/…
@Nathan 提供的 URL 不再有效 - 这是当前的，直到他们再次更改它:) cs.chromium.org/chromium/src/components/autofill/core/common/…

【解决方案2】：

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

Here's a link to the WHATWG documentation for enabling autocomplete.

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

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

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

为所有<input> 字段使用<label>
将autocomplete 属性添加到您的<input> 标记并使用此guide 填写。
为所有<input> 标签正确命名name 和autocomplete 属性

示例：

<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>` 标签

为了触发自动完成功能，请确保在 <input> 标记中正确命名 name 和 autocomplete 属性。这将自动允许在表单上自动完成。确保也有<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 2015 年。

【讨论】：

非常有帮助。我无法弄清楚自动填充地址的郊区在哪里。 Suburb 是这里的一个字段：chrome://settings/addresses

【解决方案3】：

根据我的测试，x-autocomplete 标签什么也没做。而是在输入标签上使用 autocomplete 标签，并根据此处的 HTML 规范设置它们的值 http://www.whatwg.org/specs/web-apps/current-work/multipage/association-of-controls-and-forms.html#autofill-field 。

例子：

<input name="fname" autocomplete="given-name" type="text" placeholder="First Name" required>

父表单标签需要 autocomplete="on" 和 method="POST"。

【讨论】：

此规范在哪些浏览器中实现？任何经验/测试完成了吗？
W3C spec 声明自动完成应该只包含 on、off 或 default。所以这是无效的标记，容易出现不一致。我实际上认为自动完成属性中的位置无关紧要。我猜它会查看所有属性，而自动完成恰好是它检查的属性之一。
这是正确的 HTML，请参阅 WHATWG spec 和 Google's post。

【解决方案4】：

您需要适当地命名元素，以便浏览器自动填充它们。

这是 IETF 规范：

http://www.ietf.org/rfc/rfc3106.txt 1

【讨论】：

【解决方案5】：

我刚刚使用了规范并得到了一个很好的工作示例 - 包括更多字段。

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>

  <form autocomplete="on" method="POST">

    <fieldset>
        <legend>Ship the blue gift to...</legend>
        <p>
            <label> Firstname:
<input name="fname" autocomplete="section-blue shipping given-name" type="text"  required>
            </label>
      </p>
        <p>
            <label> Lastname:
<input name="fname" autocomplete="section-blue shipping family-name" type="text" required>
            </label>
      </p>

        <p>
            <label> Address: <input name=ba
                autocomplete="section-blue shipping street-address">
            </label>


      </p>
        <p>
            <label> City: <input name=bc
                autocomplete="section-blue shipping address-level2">
            </label>

      </p>
        <p>
            <label> Postal Code: <input name=bp
                autocomplete="section-blue shipping postal-code">
            </label>
      </p>

    </fieldset>
    <fieldset>
        <legend>Ship the red gift to...</legend>
        <p>
            <label> Firstname:
<input name="fname" autocomplete="section-red shipping given-name" type="text" required>
            </label>
      </p>

        <p>
            <label> Lastname:
<input name="fname" autocomplete="section-red shipping family-name" type="text" required>
            </label>
      </p>
        <p>
            <label> Address: <input name=ra
                autocomplete="section-red shipping street-address">
            </label>
      </p>


        <p>
            <label> City: <input name=bc
                autocomplete="section-red shipping address-level2">
            </label>

      </p>

        <p>
            <label> Postal Code: <input name=rp
                autocomplete="section-red shipping postal-code">
            </label>
      </p>

    </fieldset>

        <fieldset>
        <legend>payment address</legend>
        <p>
            <label> Firstname:
<input name="fname" autocomplete="billing given-name" type="text" required>
            </label>
      </p>

        <p>
            <label> Lastname:
<input name="fname" autocomplete="billing family-name" type="text" required>
            </label>
      </p>
        <p>
            <label> Address: <input name=ra
                autocomplete="billing street-address">
            </label>
      </p>


        <p>
            <label> City: <input name=bc
                autocomplete="billing address-level2">
            </label>

      </p>

        <p>
            <label> Postal Code: <input name=rp
                autocomplete="billing postal-code">
            </label>
      </p>

    </fieldset>
    <input type="submit" />
</form>

</body>
</html>

JSBIN

它包含 2 个独立的地址区域和不同的地址类型。在 iOS 8.1.0 上也对其进行了测试，它似乎总是一次填充所有字段，而桌面 chrome 会按地址自动填充地址。

【讨论】：

不知道为什么这个答案会被否决。上面的例子仍然适用于我使用所描述的浏览器
以上示例中显示的自动完成来自这里：html.spec.whatwg.org/multipage/forms.html#autofill

【解决方案6】：

看起来我们将对该自动填充功能进行更多控制，Chrome Canary 中将提供一个新的实验性 API，可用于在向用户询问数据后访问数据：

http://www.chromium.org/developers/using-requestautocomplete http://blog.alexmaccaw.com/requestautocomplete

谷歌的新信息：

http://googlewebmastercentral.blogspot.de/2015/03/helping-users-fill-out-online-forms.html

https://developers.google.com/web/fundamentals/input/form/label-and-name-inputs#use-metadata-to-enable-auto-complete

【讨论】：

【解决方案7】：

这才是真正的答案：

有效：http://jsfiddle.net/68LsL1sq/1/<label for="name">Nom</label>
这不是：http://jsfiddle.net/68LsL1sq/2/<label for="name">No</label>

唯一的区别在于标签本身。 “Nom”来自葡萄牙语的“Name”或“Nome”。

这就是你需要的：

表单包装器；
一个<label for="id_of_field">Name</label>
<input id="id_of_field"></input>

仅此而已。

【讨论】：

我也发现标签也可以触发chrome自动补全。
所以您的意思是在计算自动完成字段时也使用标签名称？这个答案不是很清楚
其实 Nom 来自法语。但是我让它在没有标签的情况下工作，具有正确值的输入的占位符也可以工作。

【解决方案8】：

这是 Google 自动填充“名称”的新列表。任何允许的语言都有所有受支持的名称。

autofill_regex_constants.cc

【讨论】：

【解决方案9】：

Google 现在为此提供了文档：

Help users checkout faster with Autofill | Web | Google Developers

和

Create Amazing Forms: Use metadata to enable auto-complete | Web | Google Developers

【讨论】：

如果这些链接失效，只有链接的答案会变得毫无帮助，就像那个答案中的第一个一样。
没错，但这就是为什么答案是社区 wiki：鼓励其他人为它做出贡献。同样，对社区 wiki 投反对票也不会影响作者，它只会掩埋 Google 自己的文档。随时更新社区 wiki 答案，尤其是当它像更新链接一样枯燥无味时！

【解决方案10】：

就我而言，$('#EmailAddress').attr('autocomplete', 'off'); 不起作用。但以下作品适用于 jQuery 的 chrome 版本 67。

$('#EmailAddress').attr('autocomplete', 'new-email');
$('#Password').attr('autocomplete', 'new-password');

【讨论】：

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

如何命名您的&lt;input&gt; 标签

资源

JSBIN

如何命名您的`<input>` 标签