建立表單，讓使用者在電腦和行動裝置上輕鬆輸入地址資料。確保表單充分利用內建的瀏覽器功能，包括自動填入、驗證和資料輸入限制。
導入方式
以下列出建立成功地址表單的最重要指南。
使用有意義且有效的 HTML
善用專為建立表單而設計的元素和屬性：
<form>、<input>、<label>和<button>type、autocomplete和inputmode
這些屬性可啟用內建瀏覽器功能、改善無障礙功能，並為標記增添意義。
使用 <label> 元素標示資料輸入表單欄位
如要為 <input>、<select> 或 <textarea> 加上標籤，請使用 <label>。將標籤的 for 屬性設為與輸入項目的 id 相同的值，即可將標籤與輸入項目建立關聯。
充分運用 HTML 屬性
使用適當的 <input> 元素 <type> 屬性，在行動裝置上提供正確的鍵盤，並啟用瀏覽器的基本內建驗證功能，讓使用者輕鬆輸入資料。
電子郵件地址一律使用 type="email"，電話號碼則一律使用 type="tel"。
<!-- type="email"/"tel" gives mobile users the right keyboard and enables built-in validation -->
<input type="email" id="email" name="email" autocomplete="email" required>
<input type="tel" id="phone" name="phone" autocomplete="tel">
每個 <input>、<select> 和 <textarea> 元素都應有適當的 autocomplete 屬性，以提升無障礙程度，並協助使用者避免重新輸入資料。
讓按鈕發揮作用
按鈕請使用 <button>。您也可以使用 <input type="submit">，但請勿使用 div 或其他隨機元素做為按鈕。按鈕元素提供無障礙行為、內建表單提交功能，且可輕鬆設定樣式。
為每個表單提交按鈕提供說明其功能的值。在結帳流程的每個步驟中，使用描述性的行動號召，顯示進度並清楚指出下一步。舉例來說，將寄送地址表單上的提交按鈕標示為「前往付款」，而非「繼續」或「儲存」。
盡可能使用單一姓名輸入欄位
除非有充分理由需要分開儲存名字、姓氏、敬稱或其他姓名部分，否則請讓使用者在單一輸入欄位中輸入姓名。使用單一姓名輸入欄位可簡化表單、啟用剪下和貼上功能，並簡化自動填入功能。
允許國際名稱。驗證時，請避免使用僅比對拉丁字元的規則運算式。「僅限拉丁字母」會排除姓名或地址含有非拉丁字母字元的使用者。請改為允許 Unicode 字母比對，並確保後端安全支援 Unicode 做為輸入和輸出。新式瀏覽器對規則運算式中的 Unicode 支援良好。
允許各種地址格式
建立地址表單時，請注意地址格式的多樣性，即使在同一個國家/地區也可能有所不同。請勿假設地址有「正常」格式。
請盡可能使用單一 <textarea> 元素提供街道地址。
<!-- textarea handles multi-line international address formats that split inputs can't accommodate -->
<textarea id="address" name="address" autocomplete="street-address" required></textarea>
這個選項的彈性最高，適用於各種國內外地址格式。
如果資料模型需要個別地址行，請在每行使用一個 <input>，並搭配 address-line1、address-line2 (以及 address-line3，如有需要) autocomplete 權杖，確保自動填入功能仍可運作。請勿將街道地址拆分到不含這些權杖的輸入欄位，且只有第一行是必填。
<!-- Alternative: one input per line, each with its own autocomplete token -->
<input type="text" id="address-line1" name="address-line1" autocomplete="address-line1" required>
<input type="text" id="address-line2" name="address-line2" autocomplete="address-line2">
避免使用者不小心漏填資料欄位
在必填欄位中加入 required 屬性。
<input type="text" id="city" name="city" autocomplete="address-level2" required>
備用策略
自動填入功能是漸進增強功能。如果瀏覽器不支援自動填入功能，使用者只需手動輸入地址詳細資料。語意 HTML 限制 (例如 type、inputmode 和 required) 仍會以標準表單驗證的形式正常運作。