付款表单是结账流程中最关键的部分。付款表单设计不佳是导致购物车放弃的常见原因。
创建一个表单，让用户在桌面设备和移动设备上都能尽可能轻松地输入付款详细信息。确保表单充分利用内置浏览器功能进行自动填充、验证和数据输入限制。
如何实现
下面列出了构建成功支付表单的最重要准则。
使用有意义且有效的 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）仍会正常运行，以验证用户输入并提供正确的虚拟键盘。