为了完成表单的快速输入,一般浏览器提供了自动补全的功能选择。在用户填入的条目被保存的情况下,如果用户在表单再次输入相同的或部分相同的信息时,浏览器会提示相关条目,从而让你快速的完成表单的输入。问题在于,某些变化的条目,比如名字或信用卡号码,会对正常的提示造成影响。HTML5的这个新属性`autocomplete`会统一相关标签。
不同的标签对应不同的输入框
当你创建HTML表单时,你可以自由分配那些对进一步输入有较大关联的内容字段。例如在网上购物的时候,要求你填写信用卡号码,在输入的过程中将会有提示出现在附近,如“...credit-card” 和 “...ccard”。在这种条件下浏览器无法一一识别但你必须输入。因此,浏览器只能提供自动完成输入字段具有相同“名称”属性。
新属性`autocomplete`就是为了解决这些问题。相比可以任意定义的”name”属性,会为了某个特定的输入而预设几个值来实现“自动完成”。例如标签“cc-number”就是用来代表一个信用卡号码。
- <input type="text" name="credit card" autocomplete="cc-number"/>
在填写示例的输入字段,浏览器将识别标签“cc-number”并其保存为自动完成。浏览器将根据该条目的每一个输入字段,优先使用自动完成属性,而忽视的标签的名称属性。
完成填充信用卡号,名字和电话号码
当信用卡在电子商务领域成为了首选的支付方式,自动完成属性便包含了所有有关信用卡支付重要的数据的相关标签。除了信用卡号码(“cc值”),也有设置条款主人的名字(“cc-name”),卡批准号(“cc-csc”),卡类型(“cc-type”)以及终止日期(“cc-exp-year”,”cc-exp-month”月和“cc-exp”总有效期)。
当输入的名字信息时还有几个预先确定的条款,代表全名(“name”),姓名(“given-name”),额外的(“additional-name”)和姓(“family-name”)。
此外,„自动完成”是能够区分装运和帐单地址。要做到这一点,这可以委托关键词。
- <input type="text" name="shipping_street" autocomplete="shipping street-address" />
- <input type="text" name="shipping_postalcode" autocomplete="shipping postal-code" />
- <input type="text" name="shipping_place" autocomplete="shipping address-level1" />
在这个例子中,街道地址,邮政编码和位置被要求为航运只有一个标签每个电子邮件地址(”邮件”)和电话号码(“电话”)。没有进一步区别如商业或私人电话号码。
浏览器支持情况
目前而言,只有版本为43以上的Chrome浏览器支持这个新特性。不过你可以无所顾忌地用上,因为低版本的Chrome浏览器和其它浏览器会简单的进行忽略而不会造成任何影响。
via http://www.noupe.com/design/html5-improving-forms-with-autocomplete-93555.html