為了完成表單的快速輸入，一般瀏覽器提供了自動補全的功能選擇。在用戶填入的條目被保存的情況下，如果用戶在表單再次輸入相同的或部分相同的信息時，瀏覽器會提示相關條目，從而讓你快速的完成表單的輸入。問題在於，某些變化的條目，比如名字或信用卡號碼，會對正常的提示造成影響。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