付款表单最佳实践 Codelab

Sam Dutton

如需完成此 Codelab，请在第二个标签页中打开 this Glitch。

此 Codelab 介绍了如何构建安全、易于访问且易于使用的付款表单。

注意 ：本文介绍的是付款表单的前端最佳做法。但未说明如何在您的网站上实现交易。如需详细了解如何向您的网站添加付款功能，请参阅网络付款。

第 1 步：按预期使用 HTML

使用为作业构建的元素：

• <form>
• <section>
• <label>
• <input>、<select>、<textarea>
• <button>

如您所见，这些元素支持内置的浏览器功能、改进无障碍功能， 添加意义。

• 点击 Remix to Edit 以使项目可修改。

请在 index.html 中查看表单的 HTML。

<form action="#" method="post">

  <h1>Payment form</h1>

  <section>
    <label>Card number</label>
    <input>
  </section>

  <section>
    <label>Name on card</label>
    <input>
  </section>

  <section id="cc-exp-csc">
    <div>
      <label>Expiry date</label>
      <input>
    </div>
    <div>
      <label>Security code</label>
      <input>
      <div class="explanation">Last 3 digits on back of card</div>
    </div>
  </section>

  <button id="complete-payment">Complete payment</button>

</form>

卡号、卡上姓名、失效日期和安全码共有 <input> 个元素。它们全都是 封装在 <section> 元素中，并且每个元素都有一个标签。完成付款按钮是 HTML <button>。稍后在此 Codelab 中，您将了解可使用 这些元素

注意 ：<input> 元素没有结束标记。这是因为它们是空元素：它们本身不含任何内容。“/”void 元素末尾的字符是可选的：<input> 或 <input /> 均可。

点击查看应用以预览您的付款表单。

• 表单目前是否足够好？
• 您认为有什么需要改变的地方吗？
• 在移动设备上怎么样？

点击查看源代码以返回到您的源代码。

第 2 步：针对移动设备和桌面设备进行设计

您添加的 HTML 有效，但默认的浏览器样式使表单难以使用，尤其是 。也看起来不太好看。

您需要调整内边距、外边距和 字体大小。

复制以下所有 CSS 并将其粘贴到您自己的 css/main.css 文件中。

这是大量的 CSS！主要需要注意的是大小的变化：

• 将 padding 和 margin 添加到输入中。
• font-size 和其他值因视口尺寸不同而异。

准备就绪后，点击查看应用以查看样式化表单。您还会发现边框带有 已经过调整，display: block; 用于标签，让标签单独占一行； 输入可以是全宽。有关登录表单的最佳实践 更详细地介绍了这种方法的好处。

:invalid 选择器用于指示输入值何时包含无效值。（您将使用此 。）

CSS 采用“移动优先”原则：

• 默认 CSS 适用于宽度小于 400px 的视口。
• 媒体查询是 用于覆盖宽度至少为 400px 的视口的默认值，然后用于 宽度至少为 500px 的视口。这种模式应该很适合小型手机和移动设备 大屏幕和桌面设备上

每当您构建网站时，您都需要在不同的设备和视口尺寸上进行测试。也就是 对于表单而言尤其如此，因为一个小故障就可能导致表单无法使用。您应该始终调整 CSS 断点，以确保它们与您的网页正常发挥作用 内容和目标设备

• 整个表单是否可见？
• 表单输入内容是否足够大？
• 所有文字是否清晰可辨？
• 您是否注意到使用真实移动设备与使用 Chrome 开发者工具中的设备模式？
• 您是否需要调整断点？

您可以通过以下几种方式在不同设备上测试表单：

• 使用 Chrome DevTools 的 Device Mode 来模拟移动设备
• 将网址从计算机发送到手机。
• 使用 BrowserStack 等服务对范围进行测试 各种设备和浏览器

第 3 步：添加属性以帮助用户输入数据

让浏览器能够存储和自动填充输入值，并提供对安全的内置 付款和验证功能。

在 index.html 文件中为表单添加属性，如下所示：

<form action="#" method="post">

  <h1>Payment form</h1>

  <section>
    <label for="cc-number">Card number</label>
    <input id="cc-number" name="cc-number" autocomplete="cc-number" inputmode="numeric" pattern="[\d ]{10,30}" required>
  </section>

  <section>
    <label for="cc-name">Name on card</label>
    <input id="cc-name" name="cc-name" autocomplete="cc-name" pattern="[\p{L} \-\.]+" required>
  </section>

  <section id="cc-exp-csc">
    <div>
      <label for="cc-exp">Expiry date</label>
      <input id="cc-exp" name="cc-exp" autocomplete="cc-exp" placeholder="MM/YY" maxlength="5" required>
    </div>
    <div>
      <label for="cc-csc">Security code</label>
      <input id="cc-csc" name="cc-csc" autocomplete="cc-csc" inputmode="numeric" maxlength="3" required>
      <div class="explanation">Back of card, last 3 digits</div>
    </div>
  </section>

  <button id="complete-payment">Complete payment</button>

</form>

再次查看您的应用，然后点按或点击卡号字段。根据设备和 您可能会看到一个选择器，其中显示了为该浏览器存储的付款方式，如下所示。

<ph type="x-smartling-placeholder">

</ph>

内置的浏览器付款选择器和自动填充功能。

选择付款方式并输入安全码后，浏览器会使用 您在表单中添加的支付卡 autocomplete 值：

• cc-number
• cc-name
• cc-exp
• cc-csc

许多浏览器还会检查并确认信用卡号和安全码的有效性。

注意 ：请不要担心！您的浏览器或许能够使用存储的支付卡数据自动填充该表单，但无法进行付款，也不会转移或保存任何数据。

在移动设备上，您还会发现，只要点按一下 卡号字段。这是因为您使用了 inputmode="numeric"。对于数字字段，这使得 用户可以更轻松地输入数字，但无法输入非数字字符，还能促使用户 请务必记住他们输入的数据类型

将所有可用的 autocomplete 值正确添加到付款表单极为重要。时间是 这种情况很常见，因为网站在过期日期及其他日期之前错过了 autocomplete 值 字段。如果单个 autofill 值错误或缺失，用户将需要检索其实际的 手动输入卡片数据，这样可能会导致您错失销售机会。如果是在付款表单中自动填充 则用户还可能决定在手机上保留支付卡详细信息的记录 这非常不安全

注意： 研究表明，与单一输入数据相比，为年份和月份分别使用不同的选定元素可能更好。您可以自行决定最佳设置。为测试这一点，您可以重新组合和修改完整的付款表单演示中的 HTML，其中包含针对这两种过期日期字段的代码。

请尝试提交包含空白字段的付款表单。浏览器提示完成缺失 数据。现在，为卡号字段中的值添加一个字母，然后尝试提交表单。通过 浏览器警告该值无效。这是因为您使用 pattern 属性来 为字段指定有效值。这同样适用于maxlength和其他 验证限制 无需 JavaScript。

现在，您的付款表单应如下所示：

• 请尝试移除 autocomplete 值，然后填写付款表单。你遇到了什么困难 该怎么办？
• 尝试在网店中购买付款方式。思考哪些方面表现良好，哪些方面存在不足。有吗 是否有任何常见问题或你应该遵循的最佳做法？

第 4 步：提交表单后停用付款按钮

您应考虑在用户点按或点击提交按钮后停用该按钮，尤其是 用户正在付款。许多用户反复点按或点击按钮， 即使它们正常运行也无妨这可能会导致付款处理出现问题并增加服务器负载。

将以下 JavaScript 代码添加到您的 js/main.js 文件中：

const form = document.querySelector('form');
const completePaymentButton = document.querySelector('button#complete-payment');

form.addEventListener('submit', handleFormSubmission);

function handleFormSubmission(event) {
  event.preventDefault();
  if (form.checkValidity() === false) {
    // Handle invalid form data.
  } else {
    completePaymentButton.textContent = 'Making payment...';
    completePaymentButton.disabled = 'true';
    setTimeout(() => {alert('Made payment!');}, 500);
  }
}

请尝试提交付款表单，看看会发生什么。

注意 ：有些网站会在用户正确填写所有表单字段之前停用表单提交按钮。最好不要这样做，因为用户可能会不小心遗漏必填的值，或者使用无效的值，然后点按或点击已停用的提交按钮，并认为您的网站已损坏！即使您将表单值标记为无效或缺失，用户也可能看不到警告（尤其是针对较长的表单和在移动设备上）。最好在用户输入数据以及尝试提交表单时验证内嵌验证。

此时，您的代码应如下所示，其中添加了一些注释和一个 validate() 函数：

• 您会发现 JavaScript 包含用于数据验证的注释掉代码。此代码使用 Constraint Validation API （广泛支持）添加自定义 验证、访问内置浏览器界面以设置焦点和显示提示。对代码取消注释， 来试试吧！您需要为 someregex 和 message 设置适当的值，并为 someField。

• 分析和真实用户监控数据 您是否会监控这些数据，以找出改进表单的方法？

现在，您的完整付款表单应如下所示：

• 在不同设备上试用您的表单。您使用的是什么设备和浏览器 定位条件？表单有哪些方面可以改进？

更进一步

请考虑此 Codelab 未涵盖的以下关键表单功能：

• 指向您的服务条款和隐私权政策文档的链接：向用户清楚说明您 保护其数据。

• 样式和品牌信息：确保这些内容与您网站的其他部分相匹配。输入姓名和地址时 以及付款时，用户需要感到安心，相信自己仍在正确的位置。

• Google Analytics 和真实用户监控： 针对真实用户进行测试和监控，从而测试和监控您表单设计的性能和易用性。