地址表單

填寫地址可能很耗時，也令人感到沮喪。「地址行 2」的用途為何？你可能沒有姓氏，那麼應該在「姓氏」欄位中輸入什麼？避免這類混淆情況，協助使用者填寫地址表單。

建立容易使用的表單

許多表單會分別使用一個欄位填寫名字和姓氏。 不過，有些人沒有姓氏，或姓名只有一個部分，因此應該如何填寫姓氏欄位？請為名稱欄位使用單一 <input>。進一步瞭解如何處理不同的名稱格式。

根據研究， 地址第 2 行可能會讓使用者感到困惑。考慮使用 <textarea> 隱藏整個地址，或將「地址第 2 行」欄位隱藏在顯示 <button> 後方。

請謹慎處理表單控制項說明。 舉例來說，美國使用者會說「郵遞區號」，英國使用者則會說「郵遞區號」。 使用 <label for="zip">ZIP or postal code (optional)</label> 確保使用者知道要輸入哪些資料。將郵遞區號欄位設為選填，因為並非所有地址都有郵遞區號。

協助使用者輸入地址

autocomplete 屬性可協助使用者重新輸入地址：

  • autocomplete="name"
  • autocomplete="street-address"
  • autocomplete="postal-code"
  • autocomplete="country"

您可以為 autocomplete 定義多個值，並以空格分隔。假設您有一個表單用於運送地址，另一個表單用於帳單地址。如要告知瀏覽器哪個郵遞區號是帳單地址，可以使用 autocomplete="billing postal-code"。如為運送地址，請使用 shipping 做為第一個值。

使用 enterkeyhint 屬性，變更螢幕小鍵盤上 Enter 鍵的標籤。最後一個表單控制項使用 enterkeyhint="done"，其他表單控制項則使用 enterkeyhint="next"。

資源