地址表單最佳做法程式碼研究室

Sam Dutton

如要遵循本程式碼研究室，請在第二個分頁中開啟此 Glitch。

如何設計適用於各種姓名和地址格式的表單？次要形式 操作異常，會讓使用者感到厭煩，導致他們離開您的網站或放棄購物 或使用者註冊

本程式碼研究室將說明如何建構易於使用且適合大多數使用者的表單。

步驟 1：充分運用 HTML 元素和屬性

在本程式碼研究室中，您將以空白表單開始，只有標題和按鈕 然後開始新增輸入內容。(已經導入 CSS 和一小段 JavaScript included.)

• 按一下「Remix to Edit」即可編輯專案。

• 使用下列程式碼在 <form> 元素中新增名稱欄位：

<section>
  <label for="name">Name</label>
  <input id="name" name="name">
</section>

這個名稱對一個名稱欄位來說可能看起來很複雜且重複，但已有許多意義。

您已將 label 的 for 屬性與 input 建立關聯，藉此將 label 與 input 建立關聯 input的 name 或 id。輕觸或點選標籤，即可將焦點移至輸入內容 而不是單指點擊，很適合用手指、拇指和滑鼠點選！螢幕閱讀器 在標籤或標籤的輸入內容出現焦點時，朗讀標籤文字。

那 name="name" 呢？此為與資料相關聯的名稱 (也就是「name！」) 系統會在使用者提交表單時將這個輸入資料傳送至伺服器。加入 name 屬性 換句話說，您可透過 FormData API 存取這個元素的資料。

步驟 2：新增屬性，協助使用者輸入資料

在 Chrome 中輕觸或點選「名稱」輸入欄位時，會發生什麼事？畫面上應該會顯示自動填入功能 瀏覽器儲存和猜測適合做為這項輸入依據，因為 name 和 id 值。

接著將 autocomplete="name" 新增至輸入程式碼，如下所示：

<section>
  <label for="name">Name</label>
  <input id="name" name="name" autocomplete="name">
</section>

在 Chrome 中重新載入網頁，然後輕觸或按一下「名稱」輸入名稱。您發現什麼差異？

注意： 想知道如何刪除 Chrome 的自動填入建議嗎？* Windows：Shift + delete * Mac：Shift + fn + delete

您應該會發現一些細微的變化：搭配 autocomplete="name" 時，建議現在更加明確 先前用於表單輸入的值，同樣包含 autocomplete="name"。瀏覽器 除了猜測什麼以外，你也可以掌控一切。您也會看到「管理...」部分。 選項以查看和編輯瀏覽器所儲存的名稱和地址。

「自動填入」與「自動完成」的使用者介面。

，瞭解如何調查及移除這項存取權。

注意： 如果 input、select 或 textarea 有適當的自動完成值，請使用該值！

然後新增限制驗證屬性 maxlength、pattern 和 required，因此您的輸入程式碼看起來會像這樣：

<section>
  <label for="name">Name</label>
  <input id="name" name="name" autocomplete="name"
    maxlength="100" pattern="[\p{L} \-\.]+" required>
</section>

• maxlength="100" 表示瀏覽器不允許任何長度超過 100 個字元的輸入內容。

• pattern="[\p{L} \-\.]+" 採用允許 Unicode 字母字元的規則運算式。 連字號和半形句號 (全站)。這表示 Françoise 或 Jörg 等名稱不會被歸類為 「無效」。但如果您使用 \w 值 [只允許來自 拉丁字母。

• required表示...必要！瀏覽器不允許提交表單的資料沒有資料 並警告並醒目顯示您輸入的內容。不需額外驗證碼 必要！

，瞭解如何調查及移除這項存取權。

注意： 本程式碼研究室不會說明 (IMAGE) 本地化或國際化。視使用者所在地而定，您需考慮地址元件所用的不同格式和地址元件名稱，即使是同一種語言 (例如郵遞區號、郵遞區號或 PIN 碼)？網站可能需要針對多個語言代碼進行自訂，但本程式碼研究室中的地址表單設計較具彈性，應該要「夠用」代表特定位址範圍的位址

如要測試表單是否適用於及不使用這些屬性，請嘗試輸入資料：

• 請嘗試輸入不符合 pattern 屬性的值。
• 請嘗試在輸入空白的情況下提交表單。您會看到 空白必填欄位，並設定焦點

步驟 3：在表單中新增彈性地址欄位

若要新增地址欄位，請在表單中加入以下程式碼：

<section>
  <label for="address">Address</label>
  <textarea id="address" name="address" autocomplete="address"
    maxlength="300" required></textarea>
</section>

使用者輸入地址時，textarea 是最有彈性的方式，非常適合用來 剪下及貼上

除非是將地址表單拆分為街道名稱和門牌號碼，除非是 。請勿強迫使用者嘗試將地址填入不合理的欄位。

注意： 請考量我們使用表單資料的方式。用途是什麼？請務必瞭解資料需求和設定者。

接著，新增「郵遞區號」和「國家/地區」等欄位。簡單來說 這裡只列出前五個國家/地區請填寫完整地址表單中的完整清單。

<section>
  <label for="postal-code">ZIP or postal code (optional)</label>
  <input id="postal-code" name="postal-code"
    autocomplete="postal-code" maxlength="20">
</section>

<section id="country-region">
  <label for="">Country or region</label>
  <select id="country" name="country" autocomplete="country"
    required>
      <option selected value="SPACER"> </option>
      <option value="AF">Afghanistan</option>
      <option value="AX">Åland Islands</option>
      <option value="AL">Albania</option>
      <option value="DZ">Algeria</option>
      <option value="AS">American Samoa</option>
  </select>
</section>

您會看到「郵遞區號」為選填欄位，這是因為許多國家/地區不使用郵遞區號。 (Global Sourcebook) 提供了 地址格式 (包括地址範例)「Country」或「Country」標籤 地區，而不是國家/地區，因為完整清單中的部分選項 (例如 英國) 不是單一國家/地區 (儘管有 autocomplete 值)。

步驟 4：讓客戶輕鬆輸入運送地址和帳單地址

您已經建立了功能完善的地址表單，但如果您的網站需要多個地址表單 地址為何？請更新表單，方便顧客報名 運送地址和帳單地址。要如何輕鬆快速地輸入資料？ 尤其是兩個相同的位址？本程式碼研究室的文章將說明 處理多個地址的技巧。 無論執行什麼動作，請務必使用正確的 autocomplete 值！

步驟 5：新增電話號碼欄位

如要新增電話號碼輸入欄位，請在表單中加入下列程式碼：

<section>
  <label for="tel">Telephone</label>
  <input id="tel" name="tel" autocomplete="tel" type="tel"
    maxlength="30" pattern="[\d \-\+]+" enterkeyhint="done"
    required>
</section>

對於電話號碼，請使用單一輸入內容：不要將數字分為多個部分。這麼一來 使用者只需輸入資料或複製及貼上內容、簡化驗證流程，以及讓瀏覽器自動填入資料。

有兩個屬性可提升輸入電話號碼的使用者體驗：

• type="tel" 可確保行動裝置使用者取得合適的鍵盤。
• enterkeyhint="done" 會設定行動裝置鍵盤的 Enter 鍵標籤，以顯示這是最後一個 欄位，接著就可以提交表單 (預設值為 next)。

，瞭解如何調查及移除這項存取權。

請使用 Enterkeyhint 屬性設定「Enter」按鈕標籤： 「Next」和「完成」

，瞭解如何調查及移除這項存取權。

使用 type="number" 時，系統會加上向上/向下箭頭來增加號碼，因此電話、付款卡或帳號等資料並不合理。請改用 type="tel" 做為電話號碼。如果是其他數字，請使用 type="text" (或保留屬性，因為 text 是預設值)，然後加上 inputmode="numeric"，即可在行動裝置上取得數字鍵盤。

，瞭解如何調查及移除這項存取權。

注意： 使用單一輸入電話號碼時，是否會發現任何問題？您是否分開儲存電話號碼部分 (國家/地區代碼)？如果是的話，原因為何？

完整的地址表單看起來應像這樣：

• 在不同裝置上嘗試表單。您指定哪些裝置和瀏覽器？我們要怎麼做 如何改善表單？

有幾種方法可以在不同裝置上測試表單：

• 使用 Chrome 開發人員工具裝置模式 模擬行動裝置
• 將電腦中的網址傳送到手機。
• 使用 BrowserStack 等服務測試範圍 裝置和瀏覽器

，瞭解如何調查及移除這項存取權。

注意： 開始建立表單前，請務必瞭解需要收集哪些資料，以及這些資料是否必要。別詢問你不需要的資料！想要降低表單複雜度並提高隱私權，最簡單的方法就是移除不必要的欄位。減少資料儲存量也能降低後端資料成本與責任。

再升級

• 數據分析與真實使用者監控： 方便真人測試及監控表單設計的效能和可用性。 並檢查變更是否成功您應該監控負載效能，以及其他 Web Vitals。 以及網頁分析 (有多少比例的使用者是從地址表單中跳出， 該怎麼辦？使用者停留在地址表單頁面的時間有多長？) 以及互動分析 (哪一個網頁) 使用者是否會與元件互動？)

• 您的使用者位於何處？如何設定地址格式？地址使用的名稱 像是郵遞區號等元素？阿福的郵政地址指南 針對 200 多個國家/地區，提供實用連結與詳盡說明，列出地址格式。

• 國家/地區選取器較不利於可用性。 最好避免為眾多項目選取元素 和 ISO 3166 國家/地區代碼標準目前列出 249 個國家/地區！ 建議您考慮使用 <select> 替代方式，例如 Baymard Institute 國家/地區選取器。

  針對含有大量項目的清單，是否可以設計更合適的選取器？如何確保設計 是否能透過各種裝置和平台存取？(<select> 元素不適用於 大量項目，但至少適用於所有瀏覽器和輔助裝置！)

  網誌文章 <input type="country"/> 討論區 國家/地區選取器的複雜度本地化國家/地區名稱也可以 問題。國家/地區清單提供一項工具 下載多種語言的國家/地區代碼和名稱，且包含多種格式的檔案。