地址表單

填寫地址可能會很耗時,而且令人困擾。 什麼是地址行 2? 你們可能沒有姓氏,因此在「Surname」欄位中,應輸入什麼? 為避免造成混淆,並協助使用者填寫地址表單,

確認地址表單易於使用

許多表單會使用一個欄位代表姓氏,另一個欄位代表姓氏。 不過有些人沒有姓氏,或是名字未包含兩個部分 所以應如何填寫姓氏欄位?針對名稱欄位使用同一個 <input>。進一步瞭解如何處理不同的姓名格式

此外,街道地址也使用一個 <input>,而不是每個地址都有門牌號碼。

請務必謹慎處理表單控制項說明。 舉例來說,美國的使用者在英國輸入「郵遞區號」 使用 <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" 做為其他表單控制項。

資源