協助使用者避免在表單中重新輸入資料

瞭解 form 元素,以及如何填寫表單 互動式、 ,瞭解如何協助使用者避免重新輸入資料。

充分運用自動填入功能

填寫表單可能相當耗時。 舉例來說,您可以在每個想購物的網站上,重複輸入地址,可能會造成購物體驗。

自動填入功能可助你一臂之力。 地址只要輸入一次即可。 從現在開始,瀏覽器就會提供您選項,讓您為其他表單自動填入同一個地址。

你搬到其他城市了嗎? 再也不用擔心一直找不到舊地址。 你可以編輯瀏覽器儲存的地址資料,以便隨時更新資料。

瀏覽器自動填入功能的運作方式為何?

地址欄位在不同網站上的外觀可能大不相同。 瀏覽器如何知道這是地址欄位?

瀏覽器使用 來識別地址欄位。 nametypeid 屬性的值為何? 表單控制項中是否有 autocomplete 屬性

根據這些資訊 瀏覽器可提供選項,讓您選擇自動填入先前輸入的同類型資料的欄位。 瀏覽器甚至還能提供自動填入整份表單的選項。

支援自動填入功能的瀏覽器

我們來看看該如何協助瀏覽器提供正確的自動填入選項。

使用合理的屬性值

如您所知,瀏覽器可以透過表單控制項的屬性識別資料類型。

<label for="email">Email</label>
<input type="email" name="email" id="email">

是否有提供使用者應輸入電子郵件地址的欄位? 使用 email 做為 nameidtype 屬性的值。 瀏覽器提示,指出這個欄位為電子郵件欄位。

自動完成屬性

在其他例子中,瀏覽器還是難以只從 nameidtype 屬性識別資料類型。 如需相關協助,請使用 autocomplete 屬性。

您之前是否在目前使用的瀏覽器中輸入過名稱? 瀏覽器可能會讓您選擇再次填入示範中的這個欄位。

如要進一步瞭解如何 自動完成和自動填入功能。

隨堂測驗

測試你對自動填入功能的瞭解程度

要根據哪些屬性自動填入?

name 屬性。
沒錯,瀏覽器會根據這項屬性和其他屬性自動填入內容。
type 屬性
沒錯,瀏覽器會根據這項屬性和其他屬性自動填入內容。
autocomplete 屬性
沒錯,瀏覽器會根據這項屬性和其他屬性自動填入內容。
以上皆是
答對了。上述所有屬性都有助於瀏覽器提供自動填入功能。

資源