付款表單
bookmark_borderbookmark
透過集合功能整理內容
你可以依據偏好儲存及分類內容。
付款表單通常是完成購買前的最後一個步驟。
為了盡可能爭取轉換,請務必使用容易理解且安全的付款表單。
確保使用者知道要填寫哪些資訊
付款表單越簡單越好
目前僅顯示必填欄位。
指明付款金額。
「提交」按鈕正十分理想。
<button>Pay $300.00</button>
為 <label>
元素使用容易理解的用語。
例如「安全碼」
而不是「CVV」的縮寫只供部分品牌使用
協助使用者輸入付款資料
為了盡量爭取轉換,請務必讓使用者能盡快填寫付款表單。
使用 inputmode="numeric"
做為卡號和安全碼欄位
即可顯示最佳化的螢幕小鍵盤輸入數字。
為付款方式控制項新增適當的 autocomplete
值,確保瀏覽器提供自動填入功能。
使用 autocomplete="cc-name"
做為名稱。
使用 autocomplete="cc-number"
做為卡號,使用 autocomplete="cc-exp"
代表到期日。
針對每個 <input>
使用 required
屬性,確保使用者填妥表單。
付款卡安全碼可為 3 或 4 位數。
使用 minlength="3"
和 maxlength="4"
時,請由三到四位數組成。
請確保使用者只輸入卡號和安全碼。
只要使用 pattern="[0-9 ]+"
,使用者就能在輸入卡號時加入空格。
因為這是數字在實體卡片上的顯示方式
資源
除非另有註明,否則本頁面中的內容是採用創用 CC 姓名標示 4.0 授權,程式碼範例則為阿帕契 2.0 授權。詳情請參閱《Google Developers 網站政策》。Java 是 Oracle 和/或其關聯企業的註冊商標。
上次更新時間:2021-11-03 (世界標準時間)。
[[["容易理解","easyToUnderstand","thumb-up"],["確實解決了我的問題","solvedMyProblem","thumb-up"],["其他","otherUp","thumb-up"]],[["缺少我需要的資訊","missingTheInformationINeed","thumb-down"],["過於複雜/步驟過多","tooComplicatedTooManySteps","thumb-down"],["過時","outOfDate","thumb-down"],["翻譯問題","translationIssue","thumb-down"],["示例/程式碼問題","samplesCodeIssue","thumb-down"],["其他","otherDown","thumb-down"]],["上次更新時間:2021-11-03 (世界標準時間)。"],[],[]]