Rie*_*ing 181 html google-chrome autofill
我想知道是否有某种特殊标记可以为特定表单启用Chrome自动填充功能.我只发现了有关如何禁用它的问题,但我想知道我是否可以在html代码中添加某种标记,以告诉浏览器"这是地址的输入"或"这是邮政编码字段"正确填写(假设用户激活此功能).
kmo*_*ote 176
2017年更新: 看起来Kayvar的答案比我的更新.未来的读者:给出你的回答.
这是一个很好的问题,而且难以获得文档.实际上,在很多情况下,您会发现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 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$"Kat*_*tie 71
这个问题已经过时了,但我有2017年的最新答案!
谷歌为开发对移动设备友好的Web应用程序编写了一个非常好的指南.他们有一节介绍如何在表单上命名输入以轻松使用自动填充.虽然它是为移动设备编写的,但这适用于桌面和移动设备!
以下是有关如何启用自动填充功能的一些要点:
<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 lnameautocomplete:
name (全名)given-name (名字)additional-name (中间名)family-name (姓氏)<input type="text" name="fname" autocomplete="given-name">name:emailautocomplete:email<input type="text" name="email" autocomplete="email">name:address city region province state zip zip2 postal country autocomplete:
street-addressaddress-line1address-line2address-level1 (州或省)address-level2 (市)postal-code (邮政编码)countryname:phone mobile country-code area-code exchange suffix extautocomplete:telname:ccname cardnumber cvc ccmonth ccyear exp-date card-typeautocomplete:
cc-namecc-numbercc-csccc-exp-monthcc-exp-yearcc-expcc-typename:usernameautocomplete:usernamename:passwordautocomplete:
current-password (用于登录表格)new-password (用于注册和密码更改表单)Mic*_*cah 38
从我的测试来看,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".
| 归档时间： |
|
| 查看次数： |
86886 次 |
| 最近记录： |