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

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

Sam Dutton

设计良好的表单有助于用户，并提高转化率。一个小小的修复就能带来很大的改变！

试一试：如果您希望通过动手操作教程来学习这些最佳实践，请查看本文中的两个 Codelab：* 付款表单最佳实践 Codelab * 地址表单最佳实践 Codelab

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

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

核对清单

• 使用有意义的 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" …>

为单个输入使用单个标签：不要尝试仅使用一个标签为多个输入添加标签。这种方式最适合浏览器和屏幕阅读器。点按或点击标签会将焦点移至与其关联的输入，当标签或标签的输入获得焦点时，屏幕阅读器会读出标签文本。

注意：请勿单独使用占位符来代替标签。当您开始在输入框中输入文本后，占位符就会隐藏起来，因此很容易忘记输入框的用途。如果您使用占位符来显示日期等值的正确格式，也是如此。对于使用手机的用户来说，这尤其成问题，尤其是当他们分心或感到压力时！

让按钮发挥作用

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

为每个表单提交按钮提供一个值，说明其用途。对于结账流程中的每一步，请使用描述性的号召性用语来显示进度并明确下一步骤。例如，请将送货地址表单上的提交按钮标记为继续付款，而不是继续或保存。

考虑在用户点按或点击提交按钮后停用该按钮，尤其是在用户进行付款或下单时。许多用户反复点击按钮，即使这些按钮可以正常使用。这可能会导致结账失败并增加服务器负载。

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

注意：表单中按钮的默认类型为 submit。如果您想在表单中添加其他按钮（例如显示密码），请添加 type="button"。否则，点击或点按该按钮将提交表单。当任何表单字段获得焦点时，按 Enter 键可模拟点击表单中第一个 submit 按钮。如果您在表单中的 Submit 按钮之前添加了一个按钮，并且未指定类型，则该按钮将采用表单的默认按钮类型 (submit)，并在提交表单之前收到点击事件。如需查看相关示例，请参阅我们的演示：填写表单，然后按 Enter。

充分利用 HTML 属性

让用户轻松输入数据

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

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

适用于电子邮件和电话的键盘。

警告：使用 type="number" 会添加一个向上/向下箭头来递增数字，这对于电话号码、付款卡号或账号等数据毫无意义。对于此类号码，请设置 type="text"（或省略该属性，因为 text 是默认值）。对于电话号码，请使用 type="tel" 在移动设备上获取适当的键盘。对于其他数字，在移动设备上使用 inputmode="numeric" 获取数字键盘。有些网站仍会使用 type="tel" 输入支付卡号码，以确保移动用户使用的是合适的键盘。不过，inputmode目前获得了广泛支持，因此您不必这样做，但请检查用户的浏览器。

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

注意：借助 datalist 元素，用户可以从可用选项列表中进行选择，并且在用户输入文本时提供匹配的建议。如需针对 text、range 和 color 输入尝试使用 datalist，请访问 simpl.info/datalist。对于出生年份输入，您可以在 datalist-select.glitch.me 上将 select 与 input 和 datalist 进行比较。

使用自动补全功能可改进网页的无障碍性，让用户无需重复输入信息

使用适当的 autocomplete 值让浏览器可以安全地存储数据并自动填充 input、select 和 textarea 值，从而帮助用户填写表单。这在移动设备上尤为重要，是避免较高的表单放弃率的关键。自动补全还具备多项无障碍优势。

如果表单字段有适当的自动补全值，您应使用该值。MDN 网页文档提供了值的完整列表，并说明了如何正确使用这些值。

稳定的值

注意 ：除了使用适当的自动补全值之外，还需要为表单字段 name 和 id 属性提供稳定值（这些值不会在网页加载或网站部署之间发生变化），从而帮助浏览器自动填充表单。

账单邮寄地址

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

添加用于查看结算信息的链接。

与送货地址一样，请为账单邮寄地址使用适当的自动补全值，以免用户重复输入数据。如果您在不同部分中为同名输入设置了不同的值，请为自动补全属性添加前缀字词。

<input autocomplete="shipping address-line-1" ...>
...
<input autocomplete="billing address-line-1" ...>

帮助用户输入正确的数据

尽量避免因为客户“做错了什么”而“训斥”他们。相反，您应帮助用户及时解决问题，让他们更快速、更轻松地填写表单。在结账过程中，客户会尝试向贵公司支付商品或服务费用，您的工作是协助他们，而不是惩罚他们！

您可以添加约束属性来构成元素，以指定可接受的值，包括 min、max 和 pattern。系统会根据元素的值是否有效自动设置元素的有效状态，:valid 和 :invalid CSS 伪类可用于设置具有有效值或无效值的元素样式。

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

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

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

注意 ：使用 type="email" 向输入中添加 multiple 属性，以便在单个输入中对多个以英文逗号分隔的电子邮件地址启用内置验证。

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

浏览器提供的基本内置验证。

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

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

如需了解详情，请参阅使用 JavaScript 实现更复杂的实时验证。

警告：即使您在客户端实施了验证和数据输入限制，也必须确保后端能够安全地处理来自用户的数据输入和输出。切勿信任用户输入：用户输入可能具有恶意。如需了解详情，请参阅 OWASP 输入验证备忘单。

帮助用户避免缺少必需数据

对必需值的输入使用 required 属性。

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

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

简化结账流程

弥补移动商务差距！

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

您需要减少摩擦并保持专注，尤其是在移动设备上。许多网站在移动设备上获得的流量更多，但在桌面设备上获得的转化次数更多，这种现象称为移动商务差距。客户可能只是更喜欢在桌面设备上完成购买交易，但移动设备转化率较低也与用户体验不佳有关。您的目标是尽量减少移动设备上的转化损失，并尽量提高桌面设备上的转化次数。研究表明，提供更出色的移动表单体验存在巨大的机会。

最重要的是，用户更有可能放弃看起来很长、很复杂且没有方向感的表单。当用户使用较小的屏幕、分心或匆忙时，这一点尤为重要。尽可能少请求数据。

将访客结账设为默认选项

对于网店，减少表单阻力的最简单方法是将访客结账设置为默认选项。 请勿强制要求用户在购物之前创建账号。不允许访客结账被认为是导致购物车放弃的主要原因。

出处：baymard.com/checkout-usability

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

如果您提供结账后注册的选项，请确保用户刚刚完成的购买交易与其新创建的账号相关联！

显示结账进度

您可以显示进度并明确说明下一步需要执行的操作，从而让结账流程看起来不那么复杂。以下视频展示了英国零售商 johnlewis.com 如何实现这一点。

显示结账进度。

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

为表单按钮提供有意义的名称，以显示后续步骤。

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

Android 上的输入按钮：'next' 和 'done'。

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

允许使用国际名称

您可能需要验证姓名输入内容，或限制姓名数据允许使用的字符。不过，您需要尽可能不限制字母的使用。被告知您的姓名“无效”很不礼貌！

进行验证时，请避免使用仅匹配拉丁字符的正则表达式。仅使用拉丁字母会排除姓名或地址中包含拉丁字母中没有的字符的用户。请改为允许 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} \-]+" ...>

Unicode 字母匹配与仅限拉丁字母的字母匹配。

注意：您可以在下文中详细了解国际化和本地化，但请确保您的表单适用于您有用户的所有地区中的姓名。例如，对于日语姓名，您应考虑提供拼音名称字段。这有助于客户服务人员在电话中说出客户的姓名。

支持各种地址格式

设计地址表单时，请谨记地址格式令人眼花缭乱的多样化，即使在一个国家/地区内也不例外。请注意不要对“常规”地址做出假设。（如果您不确定，请查看 UK Address Oddities!。）

让地址表单灵活调整

请勿强制用户将地址压缩到不合适的表单字段中。

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

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

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

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

添加要匹配的标签：

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

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

您可以通过混剪和修改下面嵌入的演示来试用此功能。

注意：研究表明，地址行 2 可能会给用户带来问题。在设计地址表单时，请牢记这一点 - 您应考虑使用单个 textarea（见下文）或其他选项等替代方案。

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

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

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

对于 textarea，请使用 street-address 作为自动补全值。

以下示例展示了如何使用单个 textarea 作为地址：

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

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

请注意，地址部分的命名方式和地址格式因国家/地区而异，即使是同一语言也是如此。

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

如果看到不适合您的地址或不使用您预期字词的表单，可能会令人感到不快或困惑。

您的网站可能需要为多个语言区域自定义地址表单，但利用相关技巧最大限度提高表单灵活性（如上所述）可能就足够了。如果您不本地化地址表单，请务必了解处理各种地址格式的关键要点： * 避免对地址部分过于具体，例如坚持要求提供街道名称或门牌号。 * 尽可能避免将字段设为 required。例如，许多国家/地区的地址没有邮政编码，农村地址可能没有街道或道路名称。* 请使用包容性命名：“国家/地区”而不是“国家/地区”；“邮政编码”而不是“邮政编码”。

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

建议避免查询邮政编码地址

某些网站使用服务根据邮政编码或邮政编码查找地址。这对于某些用例来说可能很明智，但您应注意潜在的缺点。

邮政编码建议只适用于部分国家/地区，并且在某些地区，邮政编码可能包含大量潜在地址。

邮政编码可能包含多个地址！

用户很难从长长的地址列表中进行选择，尤其是在移动设备上，如果用户处于匆忙或紧张状态时，更是如此。让用户能够利用自动填充功能，只需点按或点击一下即可输入完整的地址，这样既简单又不易出错。

通过单一名称输入，可一键输入地址。

简化付款表单

付款表单是结账流程中最重要的一个环节。付款表单设计不当是导致购物车放弃的常见原因。细节问题：小故障就可能会导致用户放弃购买，尤其是在移动设备上。您的工作是设计表单，让用户能够尽可能轻松地输入数据。

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

请务必在支付卡表单中添加适当的 autocomplete 值，包括支付卡号、卡面上的姓名以及到期月份和年份：

• cc-number
• cc-name
• cc-exp-month
• cc-exp-year

这样一来，浏览器就可以安全地存储支付卡详细信息并正确输入表单数据，从而帮助用户。如果没有自动补全功能，用户更有可能实际记录支付卡详细信息，或者以不安全的方式将支付卡数据存储在其设备上。

注意：请勿为付款卡类型添加选择器，因为系统始终可以从付款卡号推断出此信息。

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

如果未正确设计，自定义元素可能会破坏自动填充功能，从而中断付款流程，并且无法在旧版浏览器上运行。如果自动补全功能可用于显示所有其他付款卡详细信息，但由于自动填充功能不适用于自定义元素，用户不得不找到实体付款卡查询到期日期，那么您很可能会失去一次销售机会。请考虑改用标准 HTML 元素，并相应地设置其样式。

自动补全功能填充了所有字段，但到期日期除外！

支付卡和电话号码只需输入一处即可

对于付款卡和电话号码，请使用单个输入：不要将号码拆分成多个部分。这不仅可让用户更轻松地输入数据，还能简化验证过程，并支持浏览器自动填充数据。 不妨对其他数字数据（例如 PIN 码和银行代码）也采取同样的做法。

请勿为信用卡号使用多个输入框。

仔细验证

您应实时验证数据输入，并在提交表单之前进行验证。实现此目的的一种方法是向付款卡输入添加 pattern 属性。如果用户尝试使用无效值提交付款表单，浏览器会显示一条警告消息，并将焦点设置为输入框。无需 JavaScript！

不过，pattern 正则表达式必须足够灵活，能够处理付款卡号长度范围：介于 14 位数（或更少）到 20 位数（或更多）之间。您可以访问 LDAPwiki，详细了解付款卡号的结构。

允许用户在输入新的付款卡号时添加空格，因为实体卡上的数字就是以这种方式显示的。这样对用户更友好（您不必告诉他们“他们做错了什么”），转化流程不太可能中断，并且在处理之前可以轻松移除数字中的空格。

注意：您可能需要使用动态密码进行身份或付款验证。不过，要求用户手动输入代码，或者从电子邮件或短信中复制代码不仅容易出错，而且会造成阻碍。如需了解启用动态密码的更优方法，请参阅短信动态密码表单最佳实践。

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

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

iPhone 7 和 iPhone 11 上的同一页面。
请缩减较小移动视口的内边距，以确保完成付款按钮不会被隐藏。

实现分析和 RUM

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

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

• 网页分析：包含表单的每个网页的网页浏览量、跳出率和退出次数。
• 互动分析：目标漏斗和事件可显示用户在哪个位置放弃了结账流程，以及他们在与表单互动时执行了哪些操作。
• 网站性能：以用户为中心的指标可以告诉您结账页是否加载缓慢，如果是，则可以告诉您原因。

与服务器日志、转化数据和 A/B 测试结合使用时，网页分析、互动分析和真实用户效果衡量就变得特别重要，您可以通过它们回答折扣代码是否增加了收入，或者表单布局的更改是否提高了转化次数等问题。

这反过来又为您确定工作重点、做出改变和奖励成就提供了坚实依据。

学无止境

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

照片由 @rupixen 提供，由 Unsplash 提供。