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


当前回答

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

下面是IETF的规范:

http://www.ietf.org/rfc/rfc3106.txt1

其他回答

这个问题很老了,但我有一个最新的答案!

这里有一个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年谷歌发布的“自动填充帮助用户更快结帐”。

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

在我的例子中,$('#EmailAddress')。attr(“自动完成”,“关闭”);没有工作。 但以下工作在chrome版本67由jQuery。

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

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

谷歌现在为此提供文档:

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

and

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