協助使用者避免在表單中重新輸入資料
透過集合功能整理內容
你可以依據偏好儲存及分類內容。
瞭解
form 元素,以及如何填寫表單
互動式、
,瞭解如何協助使用者避免重新輸入資料。
充分運用自動填入功能
填寫表單可能相當耗時。
舉例來說,您可以在每個想購物的網站上,重複輸入地址,可能會造成購物體驗。
自動填入功能可助你一臂之力。
地址只要輸入一次即可。
從現在開始,瀏覽器就會提供您選項,讓您為其他表單自動填入同一個地址。
你搬到其他城市了嗎?
再也不用擔心一直找不到舊地址。
你可以編輯瀏覽器儲存的地址資料,以便隨時更新資料。
瀏覽器自動填入功能的運作方式為何?
地址欄位在不同網站上的外觀可能大不相同。
瀏覽器如何知道這是地址欄位?
瀏覽器使用
來識別地址欄位。
name
、type
和 id
屬性的值為何?
表單控制項中是否有 autocomplete
屬性?
根據這些資訊
瀏覽器可提供選項,讓您選擇自動填入先前輸入的同類型資料的欄位。
瀏覽器甚至還能提供自動填入整份表單的選項。
支援自動填入功能的瀏覽器
我們來看看該如何協助瀏覽器提供正確的自動填入選項。
使用合理的屬性值
如您所知,瀏覽器可以透過表單控制項的屬性識別資料類型。
<label for="email">Email</label>
<input type="email" name="email" id="email">
是否有提供使用者應輸入電子郵件地址的欄位?
使用 email
做為 name
、id
和 type
屬性的值。
瀏覽器提示,指出這個欄位為電子郵件欄位。
自動完成屬性
在其他例子中,瀏覽器還是難以只從 name
、id
和 type
屬性識別資料類型。
如需相關協助,請使用 autocomplete
屬性。
您之前是否在目前使用的瀏覽器中輸入過名稱?
瀏覽器可能會讓您選擇再次填入示範中的這個欄位。
如要進一步瞭解如何
自動完成和自動填入功能。
隨堂測驗
測試你對自動填入功能的瞭解程度
name
屬性。
沒錯,瀏覽器會根據這項屬性和其他屬性自動填入內容。
type
屬性
沒錯,瀏覽器會根據這項屬性和其他屬性自動填入內容。
autocomplete
屬性
沒錯,瀏覽器會根據這項屬性和其他屬性自動填入內容。
以上皆是
答對了。上述所有屬性都有助於瀏覽器提供自動填入功能。
資源
除非另有註明,否則本頁面中的內容是採用創用 CC 姓名標示 4.0 授權,程式碼範例則為阿帕契 2.0 授權。詳情請參閱《Google Developers 網站政策》。Java 是 Oracle 和/或其關聯企業的註冊商標。
上次更新時間:2021-11-03 (世界標準時間)。
[{
"type": "thumb-down",
"id": "missingTheInformationINeed",
"label":"缺少我需要的資訊"
},{
"type": "thumb-down",
"id": "tooComplicatedTooManySteps",
"label":"過於複雜/步驟過多"
},{
"type": "thumb-down",
"id": "outOfDate",
"label":"過時"
},{
"type": "thumb-down",
"id": "translationIssue",
"label":"翻譯問題"
},{
"type": "thumb-down",
"id": "samplesCodeIssue",
"label":"示例/程式碼問題"
},{
"type": "thumb-down",
"id": "otherDown",
"label":"其他"
}]
[{
"type": "thumb-up",
"id": "easyToUnderstand",
"label":"容易理解"
},{
"type": "thumb-up",
"id": "solvedMyProblem",
"label":"確實解決了我的問題"
},{
"type": "thumb-up",
"id": "otherUp",
"label":"其他"
}]
{"lastModified": "\u4e0a\u6b21\u66f4\u65b0\u6642\u9593\uff1a2021-11-03 (\u4e16\u754c\u6a19\u6e96\u6642\u9593)\u3002"}
[[["容易理解","easyToUnderstand","thumb-up"],["確實解決了我的問題","solvedMyProblem","thumb-up"],["其他","otherUp","thumb-up"]],[["缺少我需要的資訊","missingTheInformationINeed","thumb-down"],["過於複雜/步驟過多","tooComplicatedTooManySteps","thumb-down"],["過時","outOfDate","thumb-down"],["翻譯問題","translationIssue","thumb-down"],["示例/程式碼問題","samplesCodeIssue","thumb-down"],["其他","otherDown","thumb-down"]],["上次更新時間:2021-11-03 (世界標準時間)。"],[],[]]