我想知道是否有某种特殊的标记，以启用Chrome自动填充功能的特定形式。我只发现了关于如何禁用它的问题，但我想知道我是否可以向html代码添加某种标记，以便告诉浏览器“这是地址的输入”或“这是邮政编码字段”，以正确地填充它(假设用户激活了此功能)。
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(以及其他支持自动填充的浏览器)主要依靠上下文线索来确定应该填充到表单元素中的数据类型。此类上下文线索的示例包括输入元素的名称、围绕元素的文本以及任何占位符文本。
然而，最近Chrome团队承认这是一个不令人满意的解决方案，他们已经开始推动标准化。谷歌网站管理员小组最近讨论了这个问题，解释道:
不幸的是，到目前为止，网站管理员很难确保Chrome和其他表单填充提供商能够正确地解析他们的表单。有些标准是存在的;但它们给网站的实施带来了沉重的负担，所以它们在实践中使用得并不多。
(他们所指的“标准”是Avalanchis上面回答中提到的规范的最新版本。)
谷歌的帖子继续描述了他们提出的解决方案(在帖子的评论中遭到了大量批评)。他们建议使用一个新的属性来达到这个目的:
只需在input元素中添加一个属性，例如电子邮件地址字段可能是这样的: <input type= " text " name= " field1 " x-autocompletetype= " email " />
.．.其中x-代表“实验性”，如果&当这成为标准，将被删除。阅读这篇文章了解更多细节，或者如果你想深入挖掘，你可以在whatwg wiki上找到更完整的建议解释。
更新: 正如在这些深刻的回答中指出的，Chrome用于识别/识别公共字段的所有正则表达式都可以在autofill_regex_constants.cc.utf8中找到。因此，要回答最初的问题，只需确保html字段的名称与这些表达式匹配。一些例子包括:
名字:" First .*name|首字母|fname| First $" 姓氏:" Last .*name|lname|姓氏| Last $|secondname|family.*name" 电子邮件:“e。?邮件” 地址(第一行):“Address .*line|address1|addr1|street” zipcode:“邮政邮政| |职位。*代码| pcode | ^ 1 z $”
看起来我们会对这个自动填充功能有更多的控制，Chrome金丝雀有一个新的实验性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
在我的测试中，x-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">否</label>
唯一的区别在于标签本身。“Nom”来自葡萄牙语中的“Name”或“Nome”。
这就是你所需要的:
表单包装器; A <label for="id_of_field">Name</label> An <input id="id_of_field"></input>
仅此而已。
这个问题很老了，但我有一个最新的答案!
这里有一个WHATWG文档的链接，用于启用自动补全。
谷歌写了一个非常好的指南，用于开发适合移动设备的web应用程序。他们有一个章节介绍如何为表单上的输入命名，以便轻松使用自动填充。尽管它是为移动设备编写的，但这适用于桌面和移动设备!
如何在HTML表单上启用自动完成
以下是关于如何启用自动完成的一些关键点:
Use a <label> for all your <input> fields Add a autocomplete attribute to your <input> tags and fill it in using this guide. Name your name and autocomplete attributes correctly for all <input> tags Example: <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>标记中的名称和自动补全属性。这将自动允许在表单上自动完成。确保还有一个<label>!这些信息也可以在这里找到。
以下是如何命名你的输入:
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)
资源
当前WHATWG自动完成的HTML标准。 “创造惊人的形式”从谷歌。似乎每天都在更新。优秀的阅读。 2015年谷歌发布的“自动填充帮助用户更快结帐”。
在我的例子中，$('#EmailAddress')。attr(“自动完成”,“关闭”);没有工作。 但以下工作在chrome版本67由jQuery。
$('#EmailAddress').attr('autocomplete', 'new-email');
$('#Password').attr('autocomplete', 'new-password');
推荐文章
- 卸载Chrome开发工具
- 形式内联内的形式水平在twitter bootstrap?
- 自定义元素在HTML5中有效吗?
- 如何触发自动填充在谷歌Chrome?
- CSS变换，锯齿边缘在铬
- 创建圈div比使用图像更容易的方法?
- 为什么Chrome浏览器不正确地确定页面是在不同的语言，并提供翻译?
- 在网页上用鼠标模拟震颤(例如帕金森病)?
- Bootstrap抛出Uncaught错误:Bootstrap的JavaScript需要jQuery
- 如何改变文本区域的边框颜色:焦点
- 我如何设置背景颜色为文本的宽度，而不是整个元素的宽度，使用CSS?
- 如何删除和清除所有的本地存储数据
- 强制打开“另存为…”弹出打开文本链接点击PDF在HTML
- 如何修改标签文本?
- Chrome在哪里存储扩展?
