此 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 中,您将了解可使用
这些元素
点击查看应用以预览您的付款表单。
- 表单目前是否足够好?
- 您认为有什么需要改变的地方吗?
- 在移动设备上怎么样?
点击查看源代码以返回到您的源代码。
第 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">![Android 手机上 Chrome 中一张付款表单的屏幕截图。一个显示浏览器内置的支付卡选择器;另一个显示的是占位符的自动填充值](https://web.developers.google.cn/static/articles/codelab-payment-form-best-practices/image/two-screenshots-a-paymen-0c2e6e2be4f9d.png?authuser=7&hl=ro)
选择付款方式并输入安全码后,浏览器会使用
您在表单中添加的支付卡 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
。分析和真实用户监控数据 您是否会监控这些数据,以找出改进表单的方法?
现在,您的完整付款表单应如下所示:
- 在不同设备上试用您的表单。您使用的是什么设备和浏览器 定位条件?表单有哪些方面可以改进?
更进一步
请考虑此 Codelab 未涵盖的以下关键表单功能:
指向您的服务条款和隐私权政策文档的链接:向用户清楚说明您 保护其数据。
样式和品牌信息:确保这些内容与您网站的其他部分相匹配。输入姓名和地址时 以及付款时,用户需要感到安心,相信自己仍在正确的位置。
Google Analytics 和真实用户监控: 针对真实用户进行测试和监控,从而测试和监控您表单设计的性能和易用性。