有关付款和地址表单的最佳做法

帮助用户尽可能快速、轻松地填写地址和付款表单，从而尽可能提高转化次数。

Sam Dutton

精心设计的表单不仅能帮助用户，还能提高转化率。一个小小的修复就能带来巨大的改变！

以下是一个简单的付款表单示例，展示了所有最佳实践：

以下是一个简单的地址表单示例，展示了所有最佳实践：

核对清单

• 使用有意义的 HTML 元素：<form>、<input>、<label> 和 <button>。
• 使用 <label> 为每个表单字段添加标签。
• 使用 HTML 元素属性访问内置浏览器功能，尤其是具有适当值的 type 和 autocomplete。
• 避免对不应递增的数字（例如支付卡号）使用 type="number"。请改用 type="text" 和 inputmode="numeric"。
• 如果 input、select 或 textarea 有合适的自动补全值，您应使用该值。
• 为了帮助浏览器自动填充表单，请为输入 name 和 id 属性提供稳定的值，这些值不会在网页加载或网站部署之间发生变化。
• 在用户点按或点击提交按钮后，将其停用。
• 在输入期间验证数据，而不仅仅是在提交表单时。
• 将访客结账设为默认选项，并让用户在结账完成后轻松创建账号。
• 通过清晰的步骤和明确的号召性用语，显示结账流程的进度。
• 通过移除杂乱和干扰因素，限制潜在的结账退出点。
• 在结账时显示完整的订单详情，并让订单调整变得简单明了。
• 不要请求您不需要的数据。
• 除非有充分的理由不这样做，否则请使用单个输入字段来要求用户输入姓名。
• 不要强制要求姓名和用户名只能使用拉丁字符。
• 允许使用各种地址格式。
• 考虑为地址使用单个 textarea。
• 使用账单邮寄地址自动补全功能。
• 必要时进行国际化和本地化。
• 考虑避免邮政编码地址查找。
• 使用适当的支付卡自动填充值。
• 使用单个输入字段来输入支付卡号。
• 如果自定义元素会破坏自动填充体验，请避免使用自定义元素。
• 在现场和实验室中进行测试：网页分析、互动分析和真实用户性能衡量。
• 在各种浏览器、设备和平台上进行测试。

使用有意义的 HTML

使用专为该任务构建的元素和属性：

• <form>、<input>、<label>和<button>
• type、autocomplete和inputmode

这些元素可启用内置浏览器功能、提高无障碍性，并为标记添加含义。

按预期使用 HTML 元素

将表单放入 <form> 中

您可能不想费心将 <input> 元素封装在 <form> 中，而是想完全使用 JavaScript 处理数据提交。

请勿这样做！

HTML <form> 可让您在所有现代浏览器中访问一组强大的内置功能，并有助于让屏幕阅读器和其他辅助设备能够访问您的网站。<form> 还可以更轻松地为 JavaScript 支持有限的旧版浏览器构建基本功能，即使代码出现故障，也能启用表单提交功能，并且适用于实际停用 JavaScript 的少数用户。

如果您有多个用于用户输入的页面组件，请务必将每个组件放在各自的 <form> 元素中。例如，如果同一网页上既有搜索功能，又有注册功能，请将它们分别放在各自的 <form> 中。

使用 <label> 为元素添加标签

如需为 <input>、<select> 或 <textarea> 添加标签，请使用 <label>。

通过为标签的 for 属性指定与输入的 id 相同的值，将标签与输入相关联。

<label for="address-line1">Address line 1</label>
<input id="address-line1" …>

为单个输入使用单个标签：请勿尝试仅使用一个标签来标记多个输入。这最适合浏览器，也最适合屏幕阅读器。点按或点击标签会将焦点移至与其关联的输入，并且当 label 或标签的 input 获得焦点时，屏幕阅读器会朗读标签文本。

让按钮发挥作用

使用 <button> 按钮！您也可以使用 <input type="submit">，但不要使用 div 或其他一些充当按钮的随机元素。按钮元素提供无障碍行为、内置表单提交功能，并且可以轻松设置样式。

为每个表单提交按钮指定一个值，用于说明其功能。对于结账流程中的每一步，请使用描述性的号召性用语，以显示进度并让用户清楚下一步该做什么。例如，将配送地址表单上的提交按钮标记为继续付款，而不是继续或保存。

考虑在用户点按或点击提交按钮后将其停用，尤其是在用户付款或下单时。许多用户会重复点击按钮，即使按钮正常运行也是如此。 这可能会导致结账流程混乱，并增加服务器负载。

const form = document.querySelector('form');
const submitButton = form.querySelector('button[type="submit"]');

form.addEventListener('submit', () => {
  submitButton.disabled = true;
  submitButton.textContent = 'Placing order…';
});

另一方面，请勿在等待用户输入完整且有效的信息时停用提交按钮。例如，不要仅仅因为某些内容缺失或无效而让保存地址按钮处于停用状态。 这无法帮助用户，他们可能会继续点按或点击该按钮，并认为该按钮已损坏。 相反，如果用户尝试提交包含无效数据的表单，请向他们说明问题所在以及如何解决。这在移动设备上尤为重要，因为移动设备上的数据输入更加困难，并且在用户尝试提交表单时，缺失或无效的表单数据可能不会显示在用户的屏幕上。

充分利用 HTML 属性

让用户能轻松输入数据

使用适当的输入 type 属性，在移动设备上提供正确的键盘，并启用浏览器的基本内置验证功能。

例如，对电子邮件地址使用 type="email"，对电话号码使用 type="tel"。

对于日期，请尽量避免使用自定义 select 元素。如果实现不当，它们会破坏自动填充体验，并且无法在旧版浏览器上运行。对于出生年份等数字，请考虑使用 input 元素，而不是 select，因为手动输入数字比从长下拉列表中选择更容易且更不易出错，尤其是在移动设备上。使用 inputmode="numeric" 确保在移动设备上显示正确的键盘，并添加文本或占位符形式的验证和格式提示，以确保用户以适当的格式输入数据。

使用自动补全功能提高无障碍性，并帮助用户避免重新输入数据

使用适当的 autocomplete 值可让浏览器通过安全地存储数据并自动填充 input、select 和 textarea 值来帮助用户。这在移动设备上尤为重要，对于避免表单放弃率过高至关重要。自动补全功能还具有多项无障碍优势。

如果表单字段有合适的自动填充值，您应该使用该值。MDN Web 文档提供了完整的值列表以及如何正确使用这些值的说明。

稳定值

账单邮寄地址

默认情况下，将账单邮寄地址设置为与配送地址相同。提供用于修改账单邮寄地址的链接（或使用 summary 和 details 元素），而不是在表单中显示账单邮寄地址，从而减少视觉杂乱。

为账单邮寄地址使用适当的自动填充值，就像为送货地址所做的那样，这样用户就不必多次输入数据。如果不同部分中同名输入框的值不同，请为自动补全属性添加前缀词。

<input autocomplete="shipping address-line1" ...>
<!-- Other fields omitted. -->
<input autocomplete="billing address-line1" ...>

帮助用户输入正确的数据

尽量避免因为客户“做错了事”而“责备”客户。相反，您应该在用户遇到问题时帮助他们解决问题，从而帮助他们更快、更轻松地填写表单。在结账过程中，客户试图为产品或服务向您的公司付款，您的工作是协助他们，而不是惩罚他们！

您可以向表单元素添加限制条件属性，以指定可接受的值，包括 min、max 和 pattern。元素的有效性状态会根据元素的值是否有效自动设置，:valid 和 :invalid CSS 伪类也是如此，它们可用于为具有有效或无效值的元素设置样式。

例如，以下 HTML 指定了 1900 年至 2020 年之间的出生年份输入。使用 type="number" 会将输入值限制为仅限数字，且在 min 和 max 指定的范围内。如果您尝试输入超出范围的数字，输入内容将被设置为无效状态。

以下示例使用 pattern="[\d ]{10,30}" 确保支付卡号有效，同时允许使用空格：

现代浏览器还会对类型为 email 或 url 的输入进行基本验证。

提交表单时，浏览器会自动将焦点设置在值有问题或缺少必填值的字段上。无需 JavaScript！

在用户输入数据时进行内嵌验证并提供反馈，而不是在用户点击提交按钮时提供错误列表。如果您需要在表单提交后验证服务器上的数据，请列出发现的所有问题，并清楚地突出显示包含无效值的所有表单字段，同时在每个有问题的字段旁边以内嵌方式显示一条消息，说明需要修正的问题。检查服务器日志和分析数据，找出常见错误，您可能需要重新设计表单。

您还应使用 JavaScript 在用户输入数据和提交表单时进行更可靠的验证。使用约束验证 API（受广泛支持），通过内置浏览器界面添加自定义验证，以设置焦点和显示提示。

如需了解详情，请参阅客户端表单验证。

帮助用户避免遗漏必要数据

对强制性值的输入使用 required 属性。

提交表单时，现代浏览器会自动提示并聚焦于缺少数据的 required 字段，您可以使用 :required 伪类突出显示必填字段。无需 JavaScript！

在每个必填字段的标签中添加星号，并在表单开头添加注释，说明星号的含义。

简化结账流程

留意移动商务差距

假设您的用户有一个疲劳预算。一旦用完，用户就会离开。

您需要减少干扰并保持专注，尤其是在移动设备上。许多网站在移动设备上获得的流量较多，但在桌面设备上获得的转化较多，这种现象称为移动商务差距。客户可能只是更喜欢在桌面设备上完成购买，但移动转化率较低也是用户体验不佳的结果。您的任务是最大限度地减少移动设备上的转化损失，并最大限度地提高桌面设备上的转化次数。研究表明，提供更好的移动表单体验蕴藏着巨大的机遇。

最重要的是，用户更有可能放弃填写看起来很长、很复杂且没有方向感的表单。当用户使用较小的屏幕、注意力分散或时间紧迫时，尤其如此。尽可能少地请求数据。

将访客结账设为默认选项

对于网店来说，减少表单阻力的最简单方法是将访客结账设为默认选项。 请勿强制要求用户必须创建账号才能进行购买。不支持访客结账是导致购物车放弃率高的主要原因。

您可以在结账后提供账号注册选项。此时，您已经拥有设置账号所需的大部分数据，因此用户应该能够快速轻松地创建账号。

显示结账进度

您可以通过显示进度并明确说明下一步需要做什么，让结账流程看起来不那么复杂。以下视频展示了英国零售商 johnlewis.com 如何实现这一目标。

您需要保持良好势头！对于付款流程中的每个步骤，请使用网页标题和描述性按钮值，清楚说明当前需要执行的操作以及下一个结账步骤。

在表单输入中使用 enterkeyhint 属性，以设置移动键盘 Enter 键标签。例如，在多页表单中使用 enterkeyhint="previous" 和 enterkeyhint="next"，在表单的最终输入中使用 enterkeyhint="done"，在搜索输入中使用 enterkeyhint="search"。

enterkeyhint 属性在 Android 和 iOS 上受支持。 如需了解详情，请参阅 enterkeyhint 说明。

让用户能够在结账流程中轻松地来回切换，以便轻松调整订单，即使在最后的付款步骤中也是如此。显示订单的完整详情，而不仅仅是有限的摘要。让用户能够在付款页面上轻松调整商品数量。在结账环节，您的首要任务是避免中断转化流程。

移除干扰元素

移除视觉干扰和分散注意力的内容（例如商品促销），从而限制潜在的退出点。 许多成功的零售商甚至在结账页面移除了导航和搜索功能。

让历程保持聚焦。此时不宜诱导用户执行其他操作！

对于回访用户，您可以隐藏他们不需要看到的数据，从而进一步简化结账流程。例如：以纯文本形式（而非表单形式）显示配送地址，并允许用户通过点击链接进行更改。

让用户可以轻松输入姓名和地址

仅请求您需要的数据

在开始编写姓名和地址表单的代码之前，请务必了解需要哪些数据。 请勿请求您不需要的数据！降低表单复杂性的最简单方法是移除不必要的字段。这也有利于保护客户隐私，并可降低后端数据成本和责任。

使用单个名称输入

允许用户使用单个输入框输入姓名，除非您有充分的理由单独存储名字、姓氏、敬称或其他姓名部分。使用单个名称输入框可降低表单的复杂性，支持剪切和粘贴，并使自动填充更简单。

具体而言，除非您有充分的理由，否则请勿费心为前缀或称谓（例如 Mrs、Dr 或 Lord）添加单独的输入字段。用户可以根据需要输入该名称。此外，honorific-prefix 自动补全功能目前在大多数浏览器中都无法使用，因此添加姓名前缀或称谓字段会破坏大多数用户的地址表单自动填充体验。

启用名称自动填充功能

使用 name 表示全名：

<input autocomplete="name" ...>

如果您确实有充分的理由拆分姓名部分，请务必使用适当的自动补全值：

• honorific-prefix
• given-name
• nickname
• additional-name-initial
• additional-name
• family-name
• honorific-suffix

允许使用国际名称

您可能需要验证输入的姓名，或限制姓名数据中允许使用的字符。不过，您需要尽可能不限制字母。It's rude to be told your name is "invalid"!

进行验证时，请避免使用仅匹配拉丁字符的正则表达式。“仅限拉丁语”会排除姓名或地址中包含非拉丁字母字符的用户。而是允许 Unicode 字母匹配，并确保您的后端安全地支持 Unicode 作为输入和输出。 现代浏览器对正则表达式中的 Unicode 提供了良好的支持。

<!-- Names with non-Latin characters (such as Françoise or Jörg) are 'invalid'. -->
<input pattern="[\w \-]+" ...>

<!-- Accepts Unicode letters. -->
<input pattern="[\p{L} \-]+" ...>

允许使用各种地址格式

在设计地址表单时，请注意，即使在同一个国家/地区，地址格式也可能千差万别。请注意，不要对“正常”地址做出假设。（如果您不相信，请查看英国地址的奇特之处！）

让地址表单灵活可变

不要强迫用户尝试将地址挤入不合适的表单字段中。

例如，不要坚持要求在不同的输入框中输入门牌号和街道名称，因为许多地址不使用这种格式，并且不完整的数据可能会破坏浏览器自动填充功能。

请特别注意 required 地址字段。例如，英国大城市的地址没有县，但许多网站仍会强制用户输入县。

使用两个灵活的地址行可以很好地适应各种地址格式。

<input autocomplete="address-line1" id="address-line1" ...>
<input autocomplete="address-line2" id="address-line2" ...>

添加要匹配的标签：

<label for="address-line1">
Address line 1 (or company name)
</label>
<input autocomplete="address-line1" id="address-line1" ...>

<label for="address-line2">
Address line 2 (optional)
</label>
<input autocomplete="address-line2" id="address-line2" ...>

考虑使用单个文本区域输入地址

最灵活的地址选项是提供单个 textarea。

textarea 方法适用于任何地址格式，非常适合剪切和粘贴，但请注意，它可能不符合您的数据要求，并且如果用户之前仅使用过包含 address-line1 和 address-line2 的表单，则可能无法使用自动填充功能。

对于文本区域，请使用 street-address 作为自动填充值。

以下示例表单演示了如何使用单个 textarea 字段来输入地址：

对地址表单进行国际化和本地化

对于地址表单，请务必考虑国际化和本地化，具体取决于用户所在的位置。

请注意，即使在同一种语言中，地址各部分的命名以及地址格式也会有所不同。

    ZIP code: US
 Postal code: Canada
    Postcode: UK
     Eircode: Ireland
         PIN: India

如果表单不符合您的地址格式或未使用您预期的字词，可能会让人感到不快或困惑。

您的网站可能需要针对多个语言区域自定义地址表单，但使用技术最大限度地提高表单灵活性（如上所述）可能就足够了。如果您不打算对地址表单进行本地化，请务必了解应对各种地址格式的关键优先事项：

• 避免对地址部分进行过于具体的限制，例如坚持要求提供街道名称或门牌号。
• 请尽可能避免将字段设为 required。例如，许多国家/地区的地址没有邮政编码，农村地址可能没有街道或道路名称。
• 使用包容性命名：使用“国家/地区”而非“国家”；使用“邮政编码”而非“邮编”。

保持灵活！上面的简单地址表单示例可以进行调整，以便在许多语言区域中“足够好”地运行。

考虑避免使用邮政编码地址查找功能

某些网站会使用一项服务来根据邮政编码查找地址。这可能适用于某些用例，但您应该注意潜在的缺点。

邮政编码地址建议功能并不适用于所有国家/地区，而且在某些地区，邮政编码可能包含大量潜在地址。

用户很难从一长串地址中进行选择，尤其是在移动设备上，如果他们时间紧迫或压力很大，就更难了。让用户利用自动填充功能，只需点按或点击一下即可输入完整地址，这样可以更轻松、更不易出错。

简化付款表单

付款表单是结账流程中最关键的部分。付款表单设计不佳是导致购物车放弃的常见原因。细节决定成败： 小小的故障就可能导致用户放弃购买，尤其是在移动设备上。 您的工作是设计表单，让用户尽可能轻松地输入数据。

帮助用户避免重新输入付款数据

请务必在支付卡表单中添加适当的 autocomplete 值，包括支付卡号、持卡人姓名、失效日期和安全码：

• cc-number
• cc-name
• cc-exp，或 cc-exp-month 和 cc-exp-year（针对单独的字段）
• cc-csc

这样，浏览器就可以安全地存储支付卡详细信息并正确输入表单数据，从而为用户提供帮助。如果没有自动填充功能，用户可能更倾向于以实体形式记录支付卡详细信息，或在设备上以不安全的方式存储支付卡数据。

避免为支付卡日期使用自定义元素

如果设计不当，自定义元素可能会破坏自动填充功能，从而中断付款流程，并且无法在旧版浏览器上运行。如果自动填充功能提供了所有其他支付卡详细信息，但由于自动填充功能不适用于自定义元素，用户不得不找到实体支付卡来查找失效日期，那么您很可能会失去这笔交易。请考虑改用标准 HTML 元素，并相应地设置其样式。

使用单个输入字段来输入支付卡号和电话号码

对于支付卡号和电话号码，请使用单个输入框：不要将号码拆分为多个部分。这样，用户可以更轻松地输入数据，验证也更简单，浏览器还可以自动填充。 考虑对其他数字数据（例如 PIN 码和银行代码）执行相同的操作。

仔细验证

您应在实时和表单提交前验证数据输入。一种方法是向支付卡输入添加 pattern 属性。如果用户尝试提交包含无效值的付款表单，浏览器会显示警告消息，并将焦点设置在输入字段上。无需 JavaScript！

不过，您的 pattern 正则表达式必须足够灵活，能够处理各种长度的支付卡号：从 14 位（或可能更少）到 20 位（或更多）。您可以从 LDAPwiki 详细了解支付卡号结构。

允许用户在输入新的支付卡号时包含空格，因为实物卡上的卡号就是这样显示的。这样对用户更友好（您不必告诉他们“他们做错了什么”），不太可能中断转化流程，并且在处理之前移除数字中的空格也很简单。

在各种设备、平台、浏览器和版本上进行测试

在用户最常用的平台上测试地址和付款表单尤为重要，因为表单元素的功能和外观可能会有所不同，并且视口大小的差异可能会导致定位问题。BrowserStack 支持在各种设备和浏览器上对开源项目进行免费测试。

实现分析和 RUM

在本地测试易用性和性能可能会有所帮助，但您需要真实数据才能正确了解用户对付款和地址表单的体验。

为此，您需要分析和真实用户监控，即有关实际用户体验的数据，例如结账页面的加载时间或付款完成时间：

• 网页分析：每个包含表单的网页的浏览量、跳出率和退出率。
• 互动分析：目标漏斗和事件可指明用户在哪个环节放弃结账流程，以及用户在与表单互动时采取了哪些操作。
• 网站性能：以用户为中心的指标可以告诉您结账页面的加载速度是否缓慢，如果是，原因是什么。

如果将网页分析、互动分析和真实用户性能衡量与服务器日志、转化数据和 A/B 测试相结合，其价值会尤为突出，可帮助您解答各种问题，例如折扣代码是否会增加收入，或者表单布局的变化是否会提高转化率。

这反过来又为您提供了坚实的基础，让您能够确定工作重点、做出调整并奖励成功。

继续学习

• 登录表单最佳实践
• 注册表单最佳实践
• 使用 WebOTP API 在网页上验证电话号码
• 创建出色的表单
• 移动表单设计最佳实践
• 功能更强大的表单控件
• 创建无障碍表单
• 使用 Credential Management API 简化注册流程
• Frank's Compulsive Guide to Postal Addresses 提供了实用的链接和详尽的指南，涵盖 200 多个国家/地区的地址格式。
• Countries Lists 提供了一个工具，可用于下载多种语言、多种格式的国家/地区代码和名称。

照片由 @rupixen 拍摄，选自 Unsplash 网站。