HTML5：使用Autocomplete属性提高表单的交互性

为了完成表单的快速输入，一般浏览器提供了自动补全的功能选择。在用户填入的条目被保存的情况下，如果用户在表单再次输入相同的或部分相同的信息时，浏览器会提示相关条目，从而让你快速的完成表单的输入。问题在于，某些变化的条目，比如名字或信用卡号码，会对正常的提示造成影响。HTML5的这个新属性`autocomplete`会统一相关标签。

不同的标签对应不同的输入框

当你创建HTML表单时，你可以自由分配那些对进一步输入有较大关联的内容字段。例如在网上购物的时候，要求你填写信用卡号码，在输入的过程中将会有提示出现在附近，如“...credit-card” 和 “...ccard”。在这种条件下浏览器无法一一识别但你必须输入。因此,浏览器只能提供自动完成输入字段具有相同“名称”属性。

新属性`autocomplete`就是为了解决这些问题。相比可以任意定义的”name”属性，会为了某个特定的输入而预设几个值来实现“自动完成”。例如标签“cc-number”就是用来代表一个信用卡号码。 

1. <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”）。

当然也有代表地址信息的自动完成属性值。自动完成区分地址数据限制为一个输入字段（”street-address“）和需要两个输入字段(„address-line1”和„address-line2”)的信息。关键词“address-level1”代表了一个国家或一个省的入口，而“address-level2”代表了城市。邮政编码是设置为„邮政编码”和国家作为„国家”。

此外,„自动完成”是能够区分装运和帐单地址。要做到这一点,这可以委托关键词。

1. <input type="text" name="shipping_street" autocomplete="shipping street-address" />
2. <input type="text" name="shipping_postalcode" autocomplete="shipping postal-code" />
3. <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

原文链接：http://www.gbtags.com/gb/share/9338.htm