表单自动填充如何在现代 Web 浏览器中工作?实现自动表单填充的浏览器中最常用的技术有哪些?
- 编辑 -
问题不是关于自动完成,而是关于表单自动填充,它不仅关心先前输入的值,还考虑要完成的字段的含义和结构。例如,Google Chrome 实现尝试解析输入的字段以猜测它们的类型和结构。或者至少是我从上面链接的代码中理解的。
看看kmote的这个答案。
重点是浏览器会查看字段的name
标签,并有根据地猜测会出现什么样的数据(正则表达式匹配是一种很好的幼稚方式)。Chrome 正在努力实现某种标准化,这样就不会那么顺利。
autocomplete
answer 的第一个元素就是几年前 Internet Explorer 引入的非标准 HTML 表单的属性。
具有讽刺意味的是,您可以在此处阅读有关 mozilla 网站的介绍:自动完成属性和使用 XHTML 的 Web 文档
这个问题已经很老了,但我有2017 年的更新答案!
为了触发自动完成,您所要做的就是正确命名它。
以下答案来自我在这里的原始答案:https ://stackoverflow.com/a/41965106/1696153
这是官方当前 WHATWG HTML 标准的链接,用于启用自动完成功能。
Google为开发对移动设备友好的 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 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
(用于注册和密码更改表格)