帮助用户尽可能快速轻松地填写地址和付款表单，从而最大限度地提高转化次数。
精心设计的表单有助于用户提高转化率。一个小小的修正就能带来很大的不同！
以下是一个简单的付款表单示例，其中展示了所有最佳实践：
以下是一个简单的地址表单示例，其中展示了所有最佳实践：
核对清单
- 使用有意义的 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 或充当按钮的其他随机元素。按钮元素提供无障碍行为、内置表单提交功能，并且可以轻松设置样式。
为每个表单提交按钮指定一个说明其用途的值。对于结账流程中的每个步骤，请使用描述性行动号召，以显示进度并明确下一步。例如，将配送地址表单上的提交按钮标记为继续付款，而不是继续或保存。
考虑在用户点按或点击提交按钮后将其停用，尤其是在用户付款或下单时。许多用户会反复点击按钮，即使按钮可以正常工作也是如此。这可能会导致结账流程出现问题，并增加服务器负载。
另一方面，请勿停用等待用户输入完整有效信息的提交按钮。例如，不要仅因缺少或无效的内容而停用保存地址按钮。 这无助于用户解决问题，他们可能会继续点按或点击该按钮，并认为该按钮已损坏。 相反，如果用户尝试提交包含无效数据的表单，请向他们说明出了什么问题以及如何解决。这在移动设备上尤为重要，因为在移动设备上输入数据更加困难，并且当用户尝试提交表单时，缺失或无效的表单数据可能不会显示在用户屏幕上。
充分利用 HTML 属性
让用户可以轻松输入数据
使用适当的输入 type 属性，以便在移动设备上提供合适的键盘，并让浏览器启用基本的内置验证。
例如，使用 type="email" 表示电子邮件地址，使用 type="tel" 表示电话号码。
对于日期，请尽量避免使用自定义 select 元素。如果未正确实现，它们会破坏自动填充体验，并且无法在旧版浏览器上运行。对于出生年份等数字，请考虑使用 input 元素而不是 select，因为手动输入数字比从长长的下拉列表中选择更容易且不易出错，尤其是在移动设备上。使用 inputmode="numeric" 可确保移动设备上显示正确的键盘，并添加验证和格式提示（使用文字或占位符），以确保用户以适当的格式输入数据。
使用自动补全功能可改进网页的无障碍性，让用户无需重复输入信息
使用适当的 autocomplete 值让浏览器可以安全地存储数据并自动填充 input、select 和 textarea 值，从而帮助用户填写表单。这在移动设备上尤为重要，是避免较高的表单放弃率的关键。自动补全还具备多项无障碍优势。
如果表单字段有合适的自动补全值，您应该使用该值。MDN 网页文档中提供了值的完整列表以及有关如何正确使用这些值的说明。
稳定值
账单邮寄地址
默认情况下，将账单邮寄地址设置为与送货地址相同。通过提供用于修改账单邮寄地址的链接（或使用 summary 和 details 元素）来减少视觉杂乱，而不是在表单中显示账单邮寄地址。