付款表单最佳实践 Codelab

此 Codelab 向您展示了如何构建安全、无障碍且易于使用的付款表单。

使用为作业构建的元素:

  • <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 稍后会介绍您可以使用这些元素访问的浏览器功能。

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

  • 表单目前能否正常运行?
  • 您认为有什么需要改变的地方吗?
  • 移动设备上的效果如何?

点击查看源代码可返回源代码。

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

您添加的 HTML 有效,但默认的浏览器样式使表单难以使用,尤其是在移动设备上。这也不太好。

您需要调整内边距、边距和字体大小,确保表单在各种设备上都能正常运行。

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

这是大量的 CSS!需要注意的主要方面是尺寸的变化:

  • 向输入添加了 paddingmargin
  • font-size 和其他值因视口尺寸不同而异。

准备就绪后,点击查看应用即可查看样式设置后的表单。您还会注意到,边框已调整,并且 display: block; 用于标签,因此标签会单独占一行,输入框可以全宽。有关登录表单的最佳做法详细介绍了此方法的好处。

:invalid 选择器用于指明输入值无效的情况。(您稍后将在此 Codelab 中使用此值。)

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

  • 默认 CSS 适用于宽度小于 400px 的视口。
  • 媒体查询用于替换宽度至少为 400px 的视口的默认设置,然后再替换宽度至少为 500px 的视口的默认设置。这应该适用于尺寸较小的手机、屏幕较大的移动设备以及桌面设备。

每当您构建 Web 应用时,都需要在不同设备和视口尺寸上进行测试。这对表单尤为重要,因为一个小问题就可能导致表单无法使用。您应始终调整 CSS 断点,确保它们与您的内容和目标设备良好配合。

  • 整个表单是否可见?
  • 表单输入框是否足够大?
  • 所有文字是否清晰可辨?
  • 您是否注意到,使用真实的移动设备与在 Chrome 开发者工具中以设备模式查看表单之间存在任何差异?
  • 您是否需要调整断点?

您可以通过多种方式在不同设备上测试表单:

第 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>

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

Android 手机上 Chrome 中一张付款表单的屏幕截图。其中一个显示内置的浏览器付款卡选择器;另一个显示自动填充的占位符值。
内置浏览器付款选择器和自动填充功能。

选择付款方式并输入安全码后,浏览器会使用您添加到表单中的支付卡 autocomplete 值自动填充表单:

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

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

在移动设备上,您还注意到,只要点按卡号字段,就会看到数字键盘。这是因为您使用了 inputmode="numeric"。对于数字字段,这有助于用户更轻松地输入数字,并防止输入非数字字符,还能提醒用户记住自己输入的数据类型。

将所有可用的 autocomplete 值正确添加到付款表单极为重要。网站经常会遗漏卡片到期日期和其他字段的 autocomplete 值。如果某个 autofill 值错误或缺失,用户将需要检索其实际的卡片,以手动输入卡片数据,这样您可能会失去促销。如果付款表单上的自动填充功能无法正常运行,用户可能还会决定在手机或计算机上保留付款卡详细信息的记录,这非常不安全。

尝试提交包含空白字段的付款表单。浏览器会提示您填写缺失的数据。现在,在卡号字段的值中添加一个字母,然后尝试提交表单。浏览器会警告该值无效。之所以出现这种情况,是因为您使用 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受到广泛支持)添加自定义验证,访问内置的浏览器界面以设置焦点和显示提示。取消注释代码并试用。您需要为 someregexmessage 设置适当的值,并为 someField 设置值。

  • 为了找出改进表单的方法,您会监控哪些分析数据和真实用户监控数据

现在,完整的付款表单应如下所示:

更进一步

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

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

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

  • 分析和真实用户监控:可让您针对真实用户测试和监控表单设计的效果和易用性。