INPUT元素的 autocomplete 屬性

HTML5 導入了新的 autocomplete 屬性,這個屬性可以讓你控制表單中輸入欄位的自動完成功能,考慮以下的設計:


這是一個form,一個文字方塊以及一個傳送按鈕,內容如下:

<form method="get">
<input type="text" name="username" />
<button type="submit">傳送</button>
</form>

現在輸入任意字元,例如H,按下「傳送」按鈕將資料傳送出去時,這個輸入的值會被文字方塊記錄下來,下一次再輸入同類型的值時,便會自動出現相關值清單的下拉式選單。以下為持續送出 H、HAPPY、HISTORY 之後,再輸入 H 即時出現的畫面:


自動完成功能是預設的,如果設定 autocomplete="off" 即可關掉自動完成的功能,如下式:

<input type="text" name="username"  autocomplete="off" />

其中 autocomplete 屬性指定了 off 屬性值,因此不會再自動出現關聯資料清單,你也可以明確的設定此屬性值為 on ,重新開啟此功能,不過在預設的情形下,這個屬性的屬性值是 on ,也因此上述並不需要設定即有此功能。

沒有留言: