您如何设计一个表单,使其适用于各种名称和地址格式?轻微的表单故障会让用户感到不快,并可能导致他们离开您的网站或放弃完成购买或注册。
此 Codelab 将向您介绍如何构建一个易于使用且适用于大多数用户的表单。
第 1 步:充分利用 HTML 元素和属性
在本 Codelab 的这一部分,您将使用一个空表单,只有一个标题和一个按钮。然后,您将开始添加输入。(已包含 CSS 和少量 JavaScript 代码。)
点击 Remix to Edit 使项目可修改。
使用以下代码将名称字段添加到
<form>
元素中:
<section>
<label for="name">Name</label>
<input id="name" name="name">
</section>
如果您只使用一个名称字段,这可能看起来很复杂且重复,但实际上已经执行了很多操作。
您已通过将 label
的 for
属性与 input
的 name
或 id
匹配,将 label
与 input
相关联。点按或点击标签会将焦点移动到其输入上,使目标比输入本身要大得多,这有利于手指、拇指和鼠标点击!当标签或标签的输入获得焦点时,屏幕阅读器会读出标签文本。
改用“name="name"
”怎么样?这是与提交表单时发送到服务器的此输入数据关联的名称(恰巧是“name”!)。包含 name
属性还意味着,FormData API 可以访问此元素中的数据。
第 2 步:添加属性以帮助用户输入数据
当您点按或点击 Chrome 中的名称输入框时,会发生什么情况?您应该会看到浏览器存储的自动填充建议,并且根据给定的 name
和 id
值,您应该看到适合此输入的猜测结果。
现在,将 autocomplete="name"
添加到输入代码中,如下所示:
<section>
<label for="name">Name</label>
<input id="name" name="name" autocomplete="name">
</section>
在 Chrome 中重新加载页面,然后点按或点击名称输入框。您发现了哪些差异?
您应该注意到有一个细微变化:对于 autocomplete="name"
,建议现在是之前在表单输入中使用且具有 autocomplete="name"
的特定值。浏览器不仅会猜测什么内容可能合适,还完全由您掌控。您还会看到 Manage... 选项,用于查看和修改浏览器存储的名称和地址。
![Android 手机上的 Chrome 两张屏幕截图,其中显示了包含单一输入内容的表单(包含和不包含自动补全值)。其中一个会在浏览器界面启发式方法中显示建议值;另一个会在存储了自动补全值时显示界面。](https://web.developers.google.cn/static/articles/codelab-address-form-best-practices/image/two-screenshots-chrome-4d8d209f546ec.jpg?authuser=5&hl=fi)
现在添加约束条件验证属性
maxlength
、pattern
和 required
,使输入代码如下所示:
<section>
<label for="name">Name</label>
<input id="name" name="name" autocomplete="name"
maxlength="100" pattern="[\p{L} \-\.]+" required>
</section>
maxlength="100"
表示浏览器不允许输入超过 100 个字符的任何内容。pattern="[\p{L} \-\.]+"
使用允许 Unicode 字母字符、连字符和英文句点(句号)的正则表达式。也就是说,像 Françoise 或 Jörg 这样的名字不会归类为“无效”。如果您使用值\w
,[仅允许使用拉丁字母中的字符,则情况不会如此。required
表示...必需!在没有此字段数据的的情况下,浏览器不允许提交表单,并且会在您尝试提交输入内容时发出警告并突出显示。无需额外的代码!
如要测试表单在使用这些属性和不使用这些属性时的效果,请尝试输入数据:
- 请尝试输入不符合
pattern
属性的值。 - 尝试提交空白输入内容的表单。您将看到关于必填字段为空的内置浏览器功能警告,并将焦点置于该字段。
第 3 步:在表单中添加灵活地址字段
如要添加地址字段,请将以下代码添加到表单中:
<section>
<label for="address">Address</label>
<textarea id="address" name="address" autocomplete="address"
maxlength="300" required></textarea>
</section>
textarea
是用户输入地址最灵活的方式,非常适合剪切和粘贴。
除非确实需要,否则应避免将地址形式拆分为街道名称和门牌号等组成部分。请勿强制用户尝试在不合理的字段中填入地址。
现在,添加邮政编码和国家或地区字段。为简单起见,此处仅包含前五个国家/地区。如需查看完整的地址列表,请参阅完整的地址表单。
<section>
<label for="postal-code">ZIP or postal code (optional)</label>
<input id="postal-code" name="postal-code"
autocomplete="postal-code" maxlength="20">
</section>
<section id="country-region">
<label for="">Country or region</label>
<select id="country" name="country" autocomplete="country"
required>
<option selected value="SPACER"> </option>
<option value="AF">Afghanistan</option>
<option value="AX">Åland Islands</option>
<option value="AL">Albania</option>
<option value="DZ">Algeria</option>
<option value="AS">American Samoa</option>
</select>
</section>
您会发现,邮政编码是可选的,这是因为许多国家/地区不使用邮政编码。
(Global Sourcebook 提供有关 194 个不同国家/地区的地址格式的信息,包括示例地址。)使用标签“国家或地区”而不是“国家/地区”,因为完整列表中的某些选项(例如英国)并非单一国家/地区(尽管值为 autocomplete
)。
第 4 步:让客户能够轻松输入送货地址和账单邮寄地址
您已经构建了一个功能齐全的地址表单,但是如果您的网站要求提供多个地址(例如配送和结算),该怎么办?请尝试更新您的表单,使客户能够输入送货地址和账单邮寄地址。如何尽可能快速、轻松地输入数据,特别是在两个地址相同的情况下?此 Codelab 附带的文章介绍了处理多个地址的技巧。无论如何,请务必使用正确的 autocomplete
值!
第 5 步:添加电话号码字段
如需添加电话号码输入,请将以下代码添加到表单中:
<section>
<label for="tel">Telephone</label>
<input id="tel" name="tel" autocomplete="tel" type="tel"
maxlength="30" pattern="[\d \-\+]+" enterkeyhint="done"
required>
</section>
对于电话号码,请使用单一输入:请勿将号码拆分为多个部分。这使用户可以更轻松地输入数据或复制和粘贴数据,使验证更简单,并支持浏览器自动填充数据。
有两个属性可以改善用户输入电话号码的体验:
type="tel"
可确保移动设备用户获得合适的键盘。enterkeyhint="done"
用于设置移动设备键盘的 Enter 键标签,以显示这是最后一个字段,现在可以提交表单了(默认值为next
)。
![Android 上的一个表单的两个屏幕截图,显示了 Enterkeyhint 输入属性如何更改 Enter 键按钮图标。](https://web.developers.google.cn/static/articles/codelab-address-form-best-practices/image/two-screenshots-a-form-d3f2a1ca901d8.png?authuser=5&hl=fi)
完整的地址表单现在应如下所示:
- 在不同设备上尝试填写表单。您定位的是哪些设备和浏览器?表单应该如何改进?
您可以通过多种方式在不同设备上测试表单:
- 使用 Chrome DevTools Device Mode 来模拟移动设备。
- 将网址从计算机发送到手机。
- 使用 BrowserStack 等服务在各种设备和浏览器上进行测试。
更进一步
Analytics 和 Real User Monitoring:针对真实用户测试和监控表单设计的性能和易用性,并检查更改是否成功。您应监控加载性能和其他网页指标,以及网页分析(有多少用户未填写地址表单而跳出?用户在地址表单页面上停留的时间有多长?)和互动分析(用户与哪些网页组件互动,或不互动?)
您的用户位于何处?他们如何设置地址格式?这些地址组件(例如邮政编码)使用什么名称?Frank 的邮政地址强制指南提供了实用的链接和大量指南,详细介绍了 200 多个国家/地区的地址格式。
国家/地区选择器因易用性不佳而广为人知。最好避免为冗长的项目列表选择元素,而 ISO 3166 国家/地区代码标准目前列出了 249 个国家/地区!您可能需要考虑替代方案,例如 Baymard Institute 国家/地区选择器,而不是
<select>
。您能为包含大量项的列表设计更好的选择器吗?如何确保您的设计适用于各种设备和平台?(
<select>
元素不适用于大量项目,但至少它几乎可以在所有浏览器和辅助设备上使用!)博文 <input type="country" /> 讨论了国家/地区选择器标准化的复杂性。国家/地区名称的本地化也可能有问题。国家/地区列表具有一个以多种格式下载国家/地区代码和名称的工具。