此 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 的后面部分,您将了解通过使用这些元素可以使用的浏览器功能。
点击查看应用以预览您的付款表单。
- 表单目前是否显示效果足够好?
- 您是否需要做出一些更改来让它更好地发挥作用?
- 改用移动设备呢?
点击 View Source 可返回源代码。
第 2 步:针对移动设备和桌面设备进行设计
您添加的 HTML 有效,但默认的浏览器样式会导致表单难以使用,尤其是在移动设备上。它看起来也不太好。
您需要调整内边距、外边距和字体大小,以确保表单在各种设备上都能正常运行。
复制下面的所有 CSS 并将其粘贴到您自己的 css/main.css
文件中。
CSS 内容非常多!主要需要注意的是尺寸变更:
- 将
padding
和margin
添加到输入中。 font-size
和其他值会根据不同的视口尺寸而有所不同。
准备就绪后,请点击 View App 以查看样式化的表单。您还会发现,边框已经过调整,display: block;
用于标签,使标签能够独立成行,并且输入可以是全宽。登录表单最佳做法更详细地介绍了此方法的优势。
:invalid
选择器用于指明输入的值何时无效。(此 Codelab 稍后会用到它。)
CSS 是移动优先的:
- 默认 CSS 适用于宽度小于
400px
的视口。 - 媒体查询用于替换宽度至少为
400px
的视口的默认值,然后替换宽度至少为500px
的视口的默认值。这应该适用于较小的手机、屏幕较大的移动设备和桌面设备。
每当构建 Web 应用时,您都需要在不同的设备和视口尺寸上进行测试。对于表单来说尤其如此,因为一个小小的故障就可能使表单无法使用。您应始终调整 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>
再次查看您的应用,然后点按或点击卡号字段。根据设备和平台,您可能会看到一个选择器,其中显示了为浏览器存储的付款方式,如下所示。
![Android 手机上 Chrome 中付款表单的两张屏幕截图。其中一个显示内置的浏览器支付卡选择器;另一个会显示自动填充的占位符值。](https://web.developers.google.cn/static/articles/codelab-payment-form-best-practices/image/two-screenshots-a-paymen-0c2e6e2be4f9d.png?authuser=6&hl=lt)
在您选择付款方式并输入安全码后,浏览器会使用您向表单中添加的支付卡 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(受到广泛支持)添加自定义验证,访问内置浏览器界面来设置焦点和显示提示。取消注释上面的代码,然后试试看。您需要为
someregex
和message
设置适当的值,并为someField
设置值。您会监控哪些分析和 Real User Monitoring 数据,以找出改进表单的方法?
完整的付款表单应如下所示:
- 在不同设备上试用表单。您定位的是哪些设备和浏览器?表单应如何改进?
更进一步
请考虑此 Codelab 中未涵盖的以下关键形式功能:
指向您的服务条款和隐私权政策文档的链接:向用户明确说明您如何保护他们的数据。
样式和品牌信息:确保这些内容与您网站的其余内容相得益彰。在输入姓名和地址并付款时,需要让用户感到放心,确信自己仍然位于正确的位置。
Analytics 和 Real User Monitoring:支持为真实用户测试和监控表单设计的性能和易用性。