瞭解表單元素,以及如何建立互動式表單後,接著來看看可以如何協助使用者避免重新輸入資料。
充分運用自動填入功能
填寫表單可能非常耗時。舉例來說,在想要購物的網站上反覆輸入地址,並不是良好的購物體驗。
自動填入功能可助您一臂之力。 地址只需輸入一次。 從現在開始,瀏覽器會自動讓您選擇為其他表單填入相同的地址。
你移動到其他城市嗎? 您不必擔心需要永久保留舊地址,你可以編輯瀏覽器儲存的地址資料,並隨時更新相關資訊。
瀏覽器自動填入功能如何運作?
同一個地址欄位在不同網站上的外觀可能會大不相同。 瀏覽器如何得知這是地址欄位?
瀏覽器會使用經驗法則來識別地址欄位。name
、type
和 id
屬性的值有哪些?表單控制項中是否有 autocomplete
屬性?
根據這項資訊,瀏覽器可提供選項,讓根據先前輸入的同類型資料自動填入欄位。瀏覽器甚至能自動填入整份表單。
協助瀏覽器使用自動填入功能
以下說明如何讓瀏覽器提供正確的自動填入選項。
使用合理的屬性值
如先前所述,瀏覽器可以查看表單控制項的屬性,藉此識別資料類型。
<label for="email">Email</label>
<input type="email" name="email" id="email">
是否已提供使用者應輸入電子郵件地址的欄位?
使用 email
做為 name
、id
和 type
屬性的值。
瀏覽器提示代表電子郵件欄位的三個提示。
Autocomplete 屬性
在其他例子中,瀏覽器很難只從 name
、id
和 type
屬性識別資料類型。您可以使用 autocomplete
屬性提供協助。
您是否曾在您使用的瀏覽器中輸入名稱? 在示範中,瀏覽器可能會讓您選擇是否要再次填寫此欄位。
您可以在後續單元中,進一步瞭解如何使用自動完成和自動填入。
隨堂測驗
測驗您對自動填入功能的相關知識
如何根據自動填入功能提供哪些屬性?
name
屬性。type
屬性autocomplete
屬性