什麼是自動完成屬性？填寫表格時，如何使用它來改善用戶體驗？-html教學-PHP中文網

什麼是自動完成屬性？填寫表格時，如何使用它來改善用戶體驗？

Mar 25, 2025 am 11:46 AM

自動完成屬性是一個HTML屬性，可以應用於形式字段（輸入，textarea和Select Elements），以指定瀏覽器是否應根據用戶先前輸入的數據自動填充該值。此功能通過減少填寫表格所需的時間和精力來改善用戶體驗特別有用，尤其是在屏幕較小的設備上或經常填寫類似表格的用戶。

要使用自動完成屬性來增強用戶體驗，您可以為描述現場預期數據類型的屬性分配一個值。例如，在文本輸入字段上設置autocomplete="name"表示該字段是一個人的名稱，並且瀏覽器可以建議先前向用戶輸入名稱。這不僅可以加快形式填充過程，而且通過建議先前正確的條目來幫助減少錯誤。

通過戰略性地使用相關字段（例如名稱，地址，電子郵件地址和電話號碼）上的自動完成屬性，您可以顯著提高表單的效率和可用性，從而帶來更好的整體用戶體驗。

自動完成屬性可以採用與字段可能包含的不同類型數據相對應的各種值。這些值由HTML規範定義，並幫助瀏覽器理解該字段的目的是為了自動完成目的。一些共同值包括：

一般值：
- off ：禁用該字段的自動完成。
- on ：啟用該字段的自動完成，而無需指定數據類型。
自動填充的字段名稱：
- name ：全名。
- given-name ：名字。
- family-name ：姓氏。
- email ：電子郵件地址。
- tel ：電話號碼。
- address-line1 ， address-line2 ， address-line3 ：地址行。
- country ， country-name ：國家名稱或國家代碼。
- postal-code ：郵政代碼或郵政編碼。
- cc-name ， cc-number ， cc-exp ， cc-exp-month ， cc-exp-year ， cc-csc ：信用卡信息。
特定用例：
- username ， current-password ， new-password ， organization-title ， organization ：用戶名，密碼和組織信息的特定字段。

正確使用這些值可以幫助瀏覽器提供更準確和相關的自動完整建議，從而增強用戶的形式體驗。

自動完成屬性可以通過多種方式增強用戶的安全性和隱私：

選擇性自動完成：通過在敏感字段（例如密碼或信用卡號）上使用off值，您可以防止瀏覽器存儲並建議這些值。這有助於通過確保敏感信息不會無意間暴露或在不同站點上重複使用來保護用戶隱私。
用戶控制：自動完成屬性允許用戶保持對保存和自動化數據的控制。用戶可以選擇在其瀏覽器設置中啟用或禁用自動完成，從而使他們有能力決定存儲和共享多少個人信息。
準確的數據處理：通過指定在字段中預期的正確數據類型，自動完成屬性有助於確保瀏覽器準確處理和存儲用戶數據。這可以防止意外存儲和建議不正確或敏感信息。
遵守隱私法規：正確使用自動完成屬性可以幫助網站遵守GDPR等數據保護法規，該法規強調用戶同意和數據最小化。通過使用戶控制自動填充的數據，網站可以更好地與這些法規保持一致。

自動完成屬性可用於大多數類型的表單字段，包括：

但是，有一些局限性和考慮因素：

不支持的字段：自動完成屬性在<input>元素上無效，其類型具有諸如file ， range ， color或hidden類型，因為這些字段通常沒有持有從自動完成功能中受益的用戶輸入數據。
瀏覽器支持：儘管大多數現代瀏覽器都支持自動完成屬性，但不同的瀏覽器如何解釋和實施它可能會有不同。重要的是要在多個瀏覽器中測試您的表格，以確保行為一致。
安全性和隱私問題：如前所述，建議在敏感字段上使用autocomplete="off" （例如密碼），以防止意外接觸個人信息。