小开

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

下面是IETF的规范:

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

小开

最佳答案

2017年更新: 看起来凯蒂的答案比我的更有最新信息。未来的读者:给她的答案投票。

这是一个很好的问题，关于这个问题的文档很难找到。实际上，在很多情况下，你会发现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元素中添加一个属性，例如电子邮件地址字段可能是这样的:

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

.．.其中x-代表“实验性”，如果&当这成为一个标准。阅读《华盛顿邮报》获得更多细节，或者如果你想深入挖掘，你会发现一个更完整的解释在whatwg的维基上提案。

< >强更新: 正如在这些富有洞察力的答案中指出的那样，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$"

小开

看起来我们会对这个自动填充功能有更多的控制，Chrome金丝雀有一个新的实验性API，它可以用来访问用户请求后的数据:

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

谷歌的新信息:

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

小开

在我的测试中，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"。

小开

我只是摆弄了一下规范，得到了一个很好的工作示例——包括更多的字段。

<!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浏览器会按地址自动填充地址

小开

这是真正的答案:

这个工作: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>

仅此而已。

小开

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

这是一个WHATWG文档的链接，用于启用自动补全

谷歌为开发对移动设备友好的web应用程序编写了非常好的指南。他们有一个章节介绍如何为表单上的输入命名，以便轻松使用自动填充。尽管它是为移动设备编写的，但这适用于桌面和移动设备!

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

以下是关于如何启用自动完成的一些关键点:

对所有的<input>字段使用<label>
添加autocomplete属性到你的<input>标签，并使用这个指南填充它。
为所有<input>标记正确命名name和autocomplete属性

< p > < em > < / em >例子:

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

How to name your `<input>` tags

In order to trigger autocomplete, make sure you correctly name the name and autocomplete attributes in your <input> tags. This will automatically allow for autocomplete on forms. Make sure also to have a <label>! This information can also be found here.

Here's how to name your inputs:

Name
- Use any of these for name: name fname mname lname
- Use any of these for autocomplete:
  - name (for full name)
  - given-name (for first name)
  - additional-name (for middle name)
  - family-name (for last name)
- Example: <input type="text" name="fname" autocomplete="given-name">
Email
- Use any of these for name: email
- Use any of these for autocomplete: email
- Example: <input type="text" name="email" autocomplete="email">
Address
- Use any of these for name: address city region province state zip zip2 postal country
- Use any of these for autocomplete:
  - For one address input:
    - street-address
  - For two address inputs:
    - address-line1
    - address-line2
  - address-level1 (state or province)
  - address-level2 (city)
  - postal-code (zip code)
  - country
Phone
- Use any of these for name: phone mobile country-code area-code exchange suffix ext
- Use any of these for autocomplete: tel
Credit Card
- Use any of these for name: ccname cardnumber cvc ccmonth ccyear exp-date card-type
- Use any of these for autocomplete:
  - cc-name
  - cc-number
  - cc-csc
  - cc-exp-month
  - cc-exp-year
  - cc-exp
  - cc-type
Usernames
- Use any of these for name: username
- Use any of these for autocomplete: username
Passwords
- Use any of these for name: password
- Use any of these for autocomplete:
  - current-password (for sign-in forms)
  - new-password (for sign-up and password-change forms)

Resources

Current WHATWG HTML Standard for autocomplete.
"Create Amazing Forms" from Google. Seems to be updated almost daily. Excellent read.
"Help Users Checkout Faster with Autofill" from Google in 2015.

小开

谷歌现在为此提供文档:

通过自动填充帮助用户更快地结账| Web |谷歌开发人员

而且

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

小开

下面是谷歌自动填充“名称”的新列表。所有允许的语言中都有支持的名称。

autofill_regex_constants.cc .cc

小开

在我的例子中，$('#EmailAddress').attr('autocomplete', 'off');没有工作。但以下工作在chrome版本67的jQuery

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

如何触发自动填充在谷歌Chrome?

JSBIN

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

How to name your <input> tags

Resources

How to name your `<input>` tags