付款表單是結帳流程中最關鍵的部分。付款表單設計不佳，是中途放棄購物車的常見原因。
建立表單，讓使用者在電腦和行動裝置上都能輕鬆輸入付款資料。確保表單充分利用內建的瀏覽器功能，包括自動填入、驗證和資料輸入限制。
導入方式
以下列出建構成功付款表單的最重要指南。
使用有意義且有效的 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> 元素表示地址。這個選項的彈性最高，適用於各種國內外地址格式。
使用自動完成功能填寫帳單地址
根據預設，帳單地址會與寄送地址相同。提供編輯帳單地址的連結 (或使用摘要和詳細資料元素)，而不是在表單中顯示帳單地址，減少視覺雜亂。
請為帳單地址使用適當的自動完成值，就像運送地址一樣，這樣使用者就不必多次輸入資料。如果不同區段中同名輸入欄位的值不同，請在自動完成屬性中加入前置字詞。例如：
<!-- Prefix with shipping or billing; note that the valid token is address-line1 (no hyphen before the digit) -->
<input autocomplete="shipping address-line1" ...>
...
<input autocomplete="billing address-line1" ...>
顯示結帳進度
在付款流程的每個步驟中，使用網頁標題和描述性按鈕值，清楚說明目前需要執行的操作，以及下一個結帳步驟。
在表單輸入內容中使用 enterkeyhint 屬性，設定行動鍵盤的 Enter 鍵標籤。舉例來說，在多頁表單中使用 enterkeyhint="previous" 和 enterkeyhint="next"，在表單的最後一個輸入欄位中使用 enterkeyhint="done"，在搜尋輸入欄位中使用 enterkeyhint="search"。
協助使用者避免重新輸入付款資料
請務必在付款卡表單中加入適當的 autocomplete 值。如果沒有自動填入功能，使用者可能會以實體方式記錄付款卡詳細資料，或以不安全的方式儲存。
<!-- cc-number tells autofill this is a card number, not a generic number field -->
<!-- inputmode="numeric" gives a numeric keyboard without the increment/decrement spinner -->
<!-- DO NOT use type="number" — it adds increment/decrement controls and strips leading zeros -->
<input id="cc-number" name="cc-number" type="text" autocomplete="cc-number"
inputmode="numeric" maxlength="19" pattern="[\d ]{13,19}" required>
<!-- cc-name autofills with the name exactly as it appears on the card; Unicode pattern allows international names -->
<input id="cc-name" name="cc-name" type="text" autocomplete="cc-name"
maxlength="50" pattern="[\p{L} \-\.]+" required>
<!-- cc-exp autofills the full expiry date as MM/YY -->
<!-- MANDATORY: Place format hints above the input so autocomplete popovers or virtual keyboards do not obscure them during editing -->
<span id="exp-hint" class="hint">Format: MM/YY</span>
<input id="cc-exp" name="cc-exp" type="text" autocomplete="cc-exp"
aria-describedby="exp-hint" maxlength="5" required>
<!-- cc-csc autofills the security code; DO NOT use type="password" here -->
<input id="cc-csc" name="cc-csc" type="text" autocomplete="cc-csc"
inputmode="numeric" maxlength="4" pattern="[0-9]{3,4}" required>
在輸入欄位上方顯示格式提示
如果欄位有必要格式 (例如 MM/YY 到期日)，請將提示放在輸入欄位「上方」的可見元素中，並使用 aria-describedby 連結兩者，如上方的 cc-exp 範例所示。輸入欄位下方的提示很容易在使用者需要時，被行動鍵盤或自動填入彈出式視窗遮住。
請勿將 placeholder 屬性當做唯一的格式提示，也絕對不要用它取代 <label>：使用者開始輸入時，預留位置文字就會隱藏，因此編輯時無法查看。預留位置可做為標籤和常駐提示以外的額外提示。
不要遮蓋安全碼
請將 type="text" 與 inputmode="numeric" 搭配使用，而非 type="password"。使用者無法檢查遮蓋的三或四位數代碼是否有錯字，因此直到付款遭拒前，都無法發現輸入錯誤的數字，而且遮蓋功能幾乎無法提供保護，因為代碼會印在使用者持有的卡片上。
使用單一輸入欄位填寫付款卡和電話號碼
付款卡和電話號碼請使用單一輸入欄位，不要將號碼拆成多個部分。這樣一來，使用者就能更輕鬆地輸入資料、簡化驗證程序，並讓瀏覽器自動填入資料。建議您對其他數字資料 (例如 PIN 碼和銀行代碼) 採取相同做法。
仔細驗證
您應即時驗證資料輸入，並在提交表單前進行驗證。其中一種做法是在付款卡輸入欄位中加入 pattern 屬性。如果使用者嘗試提交含有無效值的付款表單，瀏覽器會顯示警告訊息，並將焦點設在輸入欄位。
不過，模式規則運算式必須足夠靈活，才能處理付款卡號長度範圍：從 14 位數 (或可能更少) 到 20 位數 (或更多)。信用卡安全碼 (也稱為 CSC、CVC、CVV 等) 由 3 或 4 位數字組成。
允許使用者在輸入新的付款卡號時加入空格，因為實體卡片上的卡號就是這樣顯示。這樣對使用者更友善 (不必告訴他們「輸入錯誤」)，也比較不會中斷轉換流程，而且在處理前移除數字中的空格也很簡單。
避免使用者不小心漏填資料欄位
在必填欄位中加入 required 屬性。新式瀏覽器會自動提示並聚焦於遺漏的資料。
備用策略
自動填入功能是漸進增強功能。如果瀏覽器不支援自動填入功能，使用者只需手動輸入付款資料即可。語意 HTML 限制 (例如 type、inputmode、pattern 和 required) 仍會正常運作，驗證使用者輸入內容並提供正確的虛擬鍵盤。