191

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

html google-chrome autofill

— 雷司令
source

182

2017年更新： 看起来凯蒂（Katie）的答案比我的拥有更多最新信息。未来的读者：请对她的回答投赞成票。

这是一个很大的问题，令人惊讶地很难获得有关它的文档。实际上，在许多情况下，您会发现Chrome自动填充功能“可以正常使用”。例如，以下html片段生成了一个表单，至少对我来说（Chrome第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小组承认这不是一个令人满意的解决方案，因此他们开始要求对此进行标准化。Google网站站长小组的一篇非常有用的文章最近讨论了此问题，并解释了：

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

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

Google帖子继续描述了他们提出的解决方案（该帖子的评论中对此提出了重大批评）。他们建议为此目的使用新属性：

只需将属性添加到输入元素，例如，电子邮件地址字段可能类似于：

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

— ote
source

3

另外，您还必须提交带有“操作”和“方法”的完整<form>

— -Tag

虽然这可能与我的测试有关，但实际上只有我下面概述的方法有效。

— 米卡

我猜想autofill regex常数不是唯一使用的东西，它还会记住自定义命名输入中的内容。

— MetaGuru 2014年

1

在此答案中使用了网址，该网址已损坏。现在可以使用：code.google.com/p/chromium/codesearch#chromium/src/components/…–

— Nathan，

2

网址@Nathan提供行不通了-这是当前一个，直到他们再次改变它:) cs.chromium.org/chromium/src/components/autofill/core/common/...

— HungryBeagle

85

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

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

Google 为开发适用于移动设备的Web应用程序编写了很好的指南。他们有一节介绍如何命名表单中的输入以轻松使用自动填充。尽管它是为移动设备编写的，但它同时适用于台式机和移动设备！

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

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

使用<label>您的所有<input>领域
a添加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 （用于注册和更改密码的表格）

资源资源

— 凯蒂
source

39

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

例：

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

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

— 米迦
source

2

该规范在哪些浏览器中实现？做过任何经验/测试吗？

— staabm 2014年

在W3C规范规定，自动完成应该只包含 on，off或default。因此，这是无效的标记，并且容易出现不一致之处。我实际上认为autocomplete属性中的位置无关紧要。我猜想它会检查所有属性，而自动完成功能恰好是它检查的属性之一。

— 利亚姆

1

这是正确的HTML，请参阅WHATWG规范和Google的帖子。

— AlecRust

5

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

这是IETF规范：

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

— 雪崩
source

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>

吉宾

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

— 稳定
source

1

不知道为什么这个答案会被否决。上面的示例仍然适合我使用描述的浏览器

— staabm

1

上面示例中显示的自动完成功能来自此处：html.spec.whatwg.org/multipage/forms.html#autofill

— Bryan

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

— 雷司令
source

0

这是真正的答案：

这有效：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>

而已。

— Totty.js
source

我也发现，标签也可以触发Chrome自动补全功能。

— emfi

因此，您要指出的是，在计算自动完成字段时还会使用标签名称吗？这个答案不是很清楚

— Liam

其实Nom是法国人。但是我使它在没有Label的情况下也可以正常工作，而Label是具有正确值的输入的占位符。

— AxelH

0

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

autofill_regex_constants.cc

— 阿尔瓦贡
source

0

Google现在提供有关此方面的文档：

使用自动填充功能帮助用户更快地结帐网页| Google开发人员

和

创建惊人的表单：使用元数据启用自动完成| 网页| Google开发人员

— 亨利
source

如果这些链接断开，则仅具有链接的答案将变得无济于事，就像该答案中的第一个一样。

— bfontaine

没错，但这就是答案是社区Wiki的原因：鼓励其他人对此做出贡献。同样，否决社区Wiki不会影响作者，它只会掩埋Google自己的文档。始终可以随时更新社区Wiki答案，尤其是当它像更新链接一样枯燥乏味时！

— 亨利

-3

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

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

— reza.cse08
source

如何在Google Chrome浏览器中触发自动填充？

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

如何命名<input>标签

资源资源

吉宾

如何命名`<input>`标签