201

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

4

10 回答 10

191

2017 年更新： 看起来 Katie 的答案比我的信息更新。未来的读者：对她的回答投赞成票。

这是一个很好的问题，而且文档出奇地难以获得。实际上，在许多情况下，您会发现 Chrome 自动填充功能“正常工作”。例如，下面的 html 片段生成了一个表单，至少对我来说（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 团队承认这是一个不能令人满意的解决方案，他们已经开始在这件事上推动标准化。谷歌网站管理员组最近发表了一篇内容丰富的帖子讨论了这个问题，解释说：

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

（他们所指的“标准”是上述 Avalanchis 回答中提到的规范的更新版本。）

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

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

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

...其中x-代表“实验性”，如果&当这成为标准时将被删除。阅读帖子了解更多详细信息，或者如果您想更深入地挖掘，您将在 whatwg wiki 上找到对该提案的更完整解释。

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

  • 名： "first.*name|initials|fname|first$"
  • 姓： "last.*name|lname|surname|last$|secondname|family.*name"
  • 电子邮件： "e.?mail"
  • 地址第一行）： "address.*line|address1|addr1|street"
  • 邮政编码： "zip|postal|post.*code|pcode|^1z$"
于 2012-03-20T21:18:01.670 回答
123

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

这是 WHATWG 文档的链接，用于启用自动完成功能。

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:39:26.980 回答
39

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

例子：

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

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

于 2013-05-31T19:18:08.767 回答
5

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

这是 IETF 规范：

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

于 2011-10-17T21:41:10.517 回答
4

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

<!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 按地址自动填充地址。

于 2014-11-06T16:43:43.697 回答
2

看起来我们将对这个自动填充功能有更多的控制，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

于 2013-05-28T16:11:56.243 回答
0

这是真正的答案：

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

所以这就是你需要的：

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

而已。

于 2014-11-07T15:31:17.787 回答
0

Google 现在为此提供了文档：

使用自动填充帮助用户更快结帐 | 网站 | 谷歌开发者

和

创建惊人的表单：使用元数据启用自动完成 | 网站 | 谷歌开发者

于 2017-09-19T15:34:36.400 回答
0

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

autofill_regex_constants.cc

于 2017-11-28T12:36:19.490 回答
-3

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

$('#EmailAddress').attr('autocomplete', 'new-email');
$('#Password').attr('autocomplete', 'new-password');
于 2018-07-22T16:04:09.270 回答