付款和地址表单最佳实践

帮助用户尽可能快速轻松地填写地址和付款表单，最大限度提高转化率。

Dec 9, 2020 — 更新日期 Nov 30, 2021

Available in: English, Español, Português, Русский, 日本語, and 한국어

Appears in: Web 付款

Sam Dutton

TwitterGitHub

精心设计的表单可以帮助用户和提高转化率。小小的改变可能会让结果大不相同！

下面是付款表单的一个简单示例，其中演示了所有最佳实践：

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

清单 #

• 使用有意义的 HTML 元素：<form>、<input>、<label> 和 <button>。
• 使用 <label> 标记每个表单字段。
• 使用 HTML 元素属性访问内置浏览器功能，特别是 type 和具有适当值的 autocomplete。
• 对于不递增的数字，请避免使用 type="number"。您可以使用 type="text"和inputmode="numeric"。
• 如果 input、select 或 textarea 可使用适当的自动完成值，则应使用。
• 为了帮助浏览器自动填充表单，请为输入的 name 和 id 属性提供稳定值，使其在页面加载或网站部署之间不会改变。
• 点击或单击后禁用提交按钮。
• 在输入期间验证数据——不仅仅是在提交表单时。
• 将顾客结账设为默认设置，并在结账完成后简化帐户创建过程。
• 以清晰的步骤显示结账流程进度，并包含明确的号召性用语。
• 消除杂乱和干扰，限制潜在的结账退出点。
• 在结账时显示完整的订单详细信息，简化订单调整操作。
• 不要索要不需要的数据。
• 在单次输入中要求客户提供姓名，除非有充分的理由多次要求客户提供。
• 不要强制要求姓名和用户名只能使用拉丁字符。
• 允许使用多种地址格式。
• 考虑对 address 使用单个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 或其他可创建按钮的一些随机元素。按钮元素提供可访问行为、内置表单提交功能，并且可以轻松设置样式。

为每个表单提交按钮赋予一个可说明功能的值。对于结账的每一个步骤，请使用描述性的号召用语，以显示进度并清楚地说明下一步。例如，在收货地址表单上为提交按钮添加标签继续付款，而不是继续或保存。

考虑在用户点击或单击提交按钮后将其禁用——尤其当用户付款或下订单时。即使工作正常，很多用户也可能反复单击按钮。这可能导致结账出错和增加服务器负载。

另一方面，不要禁用等待完整有效的用户输入的提交按钮。例如，不要因为缺少内容或内容无效而禁用保存地址按钮。这对用户没有帮助——他们可能会继续点击或单击按钮，并且会以为该按钮出了故障。如果用户尝试提交包含无效数据的表单，请说明发生的问题以及解决方法。在移动设备上，这一点尤其重要，因为在移动设备上输入数据更难，而且，在用户尝试提交表单时，他们的屏幕上可能看不到缺少或无效的表单数据。

充分利用 HTML 属性 #

让用户便于输入数据 #

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

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

对于日期，要尽量避免使用自定义 select 元素。如果实施不正确，它会破坏自动填充体验，而且在旧浏览器中无法工作。对于出生年份等数字，请考虑使用 input 元素（而不是 select），手动输入数字更简单且不易出错——尤其是在移动设备上。为了确保在移动设备上使用合适的键盘，请使用 inputmode="numeric"，同时使用文本或占位符添加验证以及格式提示，从而确保用户以正确的格式输入数据。

使用自动完成来提高可访问性并帮助用户避免重新输入数据 #

利用适当的 autocomplete 值，让浏览器能够安全存储数据和自动填充 input、select 和 textarea 值，从而帮助用户。这在移动设备上尤其重要，为了避免表单放弃率过高，这一点更是至关重要。自动完成还可以提供多种可访问性优势。

如果表单字段有合适的自动完成值，则应使用。MDN Web 文档提供了完整的值列表以及正确使用方法的说明。

默认情况下，将账单地址设置为与送货地址相同。请提供编辑账单地址的链接（或使用 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 类型的输入进行基本验证。

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

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

当用户输入数据和提交表单时，您还要使用 JavaScript 进行更可靠的验证。使用约束验证 API（已得到广泛支持）添加使用内置浏览器 UI 设置焦点和显示提示的自定义验证。

要了解更多信息，请参阅使用 JavaScript 进行更复杂的实时验证。

帮助用户避免漏填必需数据 #

对必需值使用 required 属性。

提交表单时，现代浏览器会自动提示并将焦点设置到缺少数据的 required 字段，您可以使用 :required 伪类来突出显示必填字段。不需要 JavaScript！

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

简化结账 #

注意移动商务差距！ #

设想用户有疲劳预算。一旦达到用户的耐心用完，他们就会离开。

您需要减少障碍并保持专注，尤其是在移动设备上。很多站点在移动设备上获取更多流量，但在桌面设备上获取更多转化——这种现象就称为移动商务差距。客户可能只是更喜欢在桌面上完成购买，但较低的移动转化率也是用户体验不佳的结果。您的工作是最大限度减少移动设备上的转化损失并最大限度提高桌面设备上的转化率。研究表明，提供更好的移动表单体验是一个巨大的机会。

最重要的是，用户更可能放弃过于复杂冗长和不够简单明了的表单。当用户使用小屏幕设备，不够专注或比较匆忙时，更是如此。只要求客户提供尽可能少的数据。

将客户结账设置为默认操作 #

对于在线商店，要减少表单障碍，最简单的方法是将客户结账设置为默认操作。不要强迫用户在购买前创建帐户。不允许客户结账是导致客户放弃购买的主要原因。

您可以在客户完成结账后提供帐户注册步骤。此时，您已经获得设置帐户所需的大部分数据，因此，用户可以轻松快捷的创建帐户。

显示结账进度 #

为了让客户觉得结账流程不那么复杂，您可以显示结账进度并明确告知下一步需要做什么。下面的视频展示了英国零售商 johnlewis.com 是如何实现这一目标的。

您要让客户保持动力！对于付款的每一个步骤，您都要使用页眉和描述性的按钮值，明确告知客户现在需要做什么，以及接下来是哪一个结账步骤。

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

Android 和 iOS 支持的 enterkeyhint 属性。您可以从 enterkeyhint 解释器中了解更多信息。

让用户在结账流程中可以轻松地来回切换，调整订单，即便他们已来到最后的付款步骤。完整显示订单的详细信息，而不仅仅是有限的摘要。让用户能够从付款页面轻松调整商品数量。在结账时，最关键的一点是避免中断转换进度。

排除干扰 #

通过消除视觉混乱和产品促销等干扰因素来限制潜在的退出点。很多成功的零售商甚至会从结账步骤中移除导航和搜索功能。

让客户保持专注。现在不是诱使用户做其他事情的时候！

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

简化姓名和地址输入操作 #

只要求客户提供需要的数据 #

开始对姓名和地址表单进行编码之前，请确保了解需要哪些数据。不要索要不需要的数据！最简单的降低表单复杂性的方法是删除不必要的字段。这也有利于保护客户隐私，并且可以降低后端数据成本和需要承担的责任。

使用单一名称输入字段 #

除非有充分的理由单独存储名字、姓氏、称谓或其他姓名部分，否则，您要允许用户通过单一输入字段来输入他们的姓名。使用单一名称输入字段可以简化表单，而且您要启用剪切和粘贴，让自动填充更简单。

特别是，除非有充分的理由不这样做，否则不要为前缀或头衔（例如，先生、博士或阁下）添加单独的输入字段。用户可以根据需要输入他们的姓名。此外，honorific-prefix 自动完成目前在大多数浏览器中不起作用，因此，添加姓名前缀或头衔字段会破坏大多数用户的地址表单自动填充体验。

启用姓名自动填充 #

使用 name 作为全名：

<input autocomplete="name" ...>

如果您确实有充分的理由拆分姓名部分，请确保使用适当的自动完成值：

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

允许国际名称 #

您可能想要验证姓名输入，或限制允许姓名数据使用的字符。但是，您要尽可能让用户不受限制地使用字母。告诉用户您的姓名“无效”会让用户觉得您非常不礼貌！

对于验证，请避免使用仅匹配拉丁字符的正则表达式。仅支持拉丁字符会排除姓名或地址中包含非拉丁字母字符的用户。请改为允许 Unicode 字母匹配，并确保您的后端可靠地支持将 Unicode 字符作为输入和输出。现代浏览器对正则表达式中的 Unicode 字符支持良好。

<!-- 包含非拉丁字符（如 Françoise 或 Jörg）的姓名被视为"无效"。 -->
<input pattern="[\w \-]+" ...>

<!-- 接受 Unicode 字母。 -->
<input pattern="[\p{L} \-]+" ...>

允许使用多种地址格式 #

设计地址表单时，请记住，地址格式多种多样，令人眼花缭乱，即使在同一个国家/地区，也是如此。注意，不要臆断“正常”的地址格式。（如果您不相信，不妨看看稀奇古怪的英国地址吧！）

创建灵活的地址表单 #

不要强迫用户尝试将他们的地址压缩到不合适的表单字段中。

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

使用 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" ...>

要进行尝试，您可以重组和编辑下面嵌入的演示。

考虑为地址使用单一 textarea #

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

textarea 方法适合任何地址格式，而且非常便于剪切和粘贴——但是，请记住，如果用户以前只使用过包含 address-line1 和 address-line2 的表单，textarea 就不一定符合您的数据要求。

对于 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 支持对各种设备和浏览器上的开源项目进行免费测试。

实施分析和 RUM #

在本地测试可用性和性能可能有帮助，但是，您需要真实环境下的数据来客观了解您的付款和地址表单带给用户的体验。

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

• 页面分析：包含表单的每个页面的页面浏览量、跳出率和退出率。
• 交互分析：目标渠道和事件表明用户在何处放弃了结账流程，以及他们在与您的表单交互时执行了哪些操作。
• 网站性能：以用户为中心的指标，可以告诉您结账页面加载是否缓慢，如果是，还会告诉您是什么原因。

与服务器日志、转化数据和 A/B 测试结合使用时，页面分析、交互分析和真实用户性能测量非常有价值，可以让您回答这样的问题，例如：折扣代码能否增加收入，表单布局的变化是否提高了转化率。

不仅如此，这也确定工作优先事项，做出改变和奖励成功提供了坚实的基础。

继续学习 #

• 登录表单最佳实践
• 注册表单最佳实践
• 使用 WebOTP API 验证 Web 上的电话号码
• 创建令人惊艳的表单
• 移动表单设计最佳实践
• 更强大的表单控件
• 创建可访问表单
• 利用凭据管理 API 简化注册流程
• Frank 的邮政地址必修指南为 200 多个国家/地区的地址格式提供了有用的链接和广泛的指导。
• Country Lists 提供了一个以多种语言和多种格式下载国家/地区代码和名称的工具。

照片：@rupixen；来源：Unsplash。