如何關閉表單自動填充

本文介紹如何在網站上為表單欄位停用自動填充。

理解自動填充和自動填充

預設情況下,瀏覽器會記住使用者透過網站上的 `<input>` 欄位提交的資訊。這使得瀏覽器能夠提供自動填充(即,對使用者已開始輸入內容的欄位提出可能的填充建議)或自動填充(即,在載入時預填充某些欄位)。

這些功能通常是預設啟用的,但它們可能引起使用者的隱私擔憂,因此瀏覽器可以讓使用者停用它們。然而,在表單中提交的某些資料要麼除了當前互動之外沒有其他用途(例如,一次性 PIN 碼),要麼包含敏感資訊(例如,唯一的政府識別符號或信用卡安全碼)。作為網站作者,您可能希望瀏覽器不要記住這些欄位的值,即使瀏覽器的自動填充功能已啟用。

注意: WCAG 2.1 成功標準 1.3.5:識別輸入目的 不要求必須啟用自動填充或自動填充功能;它只要求與特定個人使用者資訊相關的表單欄位在程式上得到識別。這意味著,即使表單本身的自動填充已關閉,該標準仍然可以被滿足(透過為各個表單欄位新增相關的 autocomplete 屬性)。

停用自動填充

要停用表單中的自動填充,您可以將 `autocomplete` 屬性設定為 "off"

autocomplete="off"

您可以為整個表單設定,也可以為表單中的特定輸入元素設定。

html
<form method="post" action="/form" autocomplete="off">
  …
</form>
html
<form method="post" action="/form">
  …
  <div>
    <label for="cc">Credit card:</label>
    <input type="text" id="cc" name="cc" autocomplete="off" />
  </div>
</form>

為欄位設定 autocomplete="off" 會產生兩個效果:

  • 它告訴瀏覽器不要儲存使用者輸入的資料以供以後在類似表單中自動填充(某些瀏覽器會為特殊情況提供例外,例如提示使用者儲存密碼)。
  • 它會阻止瀏覽器在會話歷史中快取表單資料。當表單資料快取到會話歷史中時,如果使用者提交了表單並點選了“後退”按鈕返回到原始表單頁面,則會顯示使用者填入的資訊。

如果瀏覽器在設定 autocomplete 為 off 後仍然提供建議,那麼您需要更改 `<input>` 元素的 name 屬性。

管理登入欄位的自動填充

現代瀏覽器實現了整合的密碼管理功能:當用戶為網站輸入使用者名稱和密碼時,瀏覽器會提供儲存的選項。當用戶再次訪問該網站時,瀏覽器會使用儲存的值自動填充登入欄位。

此外,瀏覽器還允許使用者選擇一個主密碼,瀏覽器將使用該主密碼來加密已儲存的登入詳細資訊。

即使沒有主密碼,瀏覽器內建的密碼管理通常也被視為對安全性的整體提升。由於使用者不必記住瀏覽器為他們儲存的密碼,因此他們可以選擇比平時更強的密碼。

因此,許多現代瀏覽器不支援為登入欄位設定 autocomplete="off"

  • 如果一個網站在 `<form>` 元素上設定了 autocomplete="off",並且該表單包含使用者名稱和密碼輸入欄位,瀏覽器仍會提供儲存登入資訊的選項。如果使用者同意,下次使用者訪問該頁面時,瀏覽器將自動填充這些欄位。
  • 如果一個網站為使用者名稱和密碼 `<input>` 欄位設定了 autocomplete="off",瀏覽器仍會提供儲存登入資訊的選項。如果使用者同意,下次使用者訪問該頁面時,瀏覽器將自動填充這些欄位。

如果您正在建立一個使用者管理頁面,其中使用者可以為其他人指定新密碼,並且因此希望防止密碼欄位被自動填充,您可以使用 autocomplete="new-password"

此屬性是對瀏覽器的提示;某些瀏覽器可能不遵守此設定。