如何设计适用于各种姓名和地址格式的表单?未成年人形式 小故障会令用户感到不快,可能会导致用户离开您的网站或放弃完成购买 或注册。
此 Codelab 介绍了如何构建适用于大多数用户的易用型表单。
第 1 步:充分利用 HTML 元素和属性
在此 Codelab 的这一部分中,您将从一个空表单开始,只需一个标题和一个按钮 自己的数据。然后,您需要开始添加输入。(CSS 和一些 JavaScript 已经 included.)
点击 Remix to Edit 以使项目可修改。
使用以下代码将名称字段添加到您的
<form>
元素:
<section>
<label for="name">Name</label>
<input id="name" name="name">
</section>
只对一个 name 字段来说,这可能看起来很复杂和重复,但实际上它已经执行了很多操作。
您已通过将 label
的 for
属性与label
input
input
的 name
或 id
。点按或点击某个标签会将焦点移动到其输入上,从而放大
与输入本身相比,这非常适合手指点击、拇指点击和鼠标点击!屏幕阅读器
在标签或标签的输入获得焦点时读出标签文本。
那“name="name"
”呢?指与数据关联的名称(正好是“name”!)
。添加 name
属性
这也意味着,来自此元素的数据可由 FormData API 访问。
第 2 步:添加属性以帮助用户输入数据
当您在 Chrome 中点按或点击名称输入框后,会发生什么情况?您应该会看到自动填充
根据输入的 GRU 状态,
name
和 id
值。
现在,将 autocomplete="name"
添加到输入代码中,如下所示:
<section>
<label for="name">Name</label>
<input id="name" name="name" autocomplete="name">
</section>
在 Chrome 中重新加载页面,然后点按或点击名称输入框。您发现了什么差异?
您应该会注意到一个细微变化:采用 autocomplete="name"
后,建议现在更加具体
之前在表单输入中使用且还具有 autocomplete="name"
的值。浏览器
这不仅仅是猜测合适的内容:您拥有控制权。您还会看到管理...
选项查看并编辑您的浏览器存储的名称和地址。
![Android 手机上的 Chrome 的两张屏幕截图,显示了仅包含一项输入内容的表单(包含和不包含自动补全值)。一个以启发式方式显示浏览器界面的建议值;另一个显示的是存储了自动补全值时的界面。](https://web.developers.google.cn/static/articles/codelab-address-form-best-practices/image/two-screenshots-chrome-4d8d209f546ec.jpg?authuser=7&hl=ro)
现在添加限制条件验证属性
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>
您会看到邮政编码为可选项,这是因为许多国家/地区不使用邮政编码。
(全球来源手册中提供了
194 个不同国家/地区的地址格式(包括示例地址)。国家/地区或
请使用 region [地区] 而非 Country [国家/地区],因为完整列表中的某些选项(例如
英国)并非单个国家/地区(尽管值为 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=7&hl=ro)
现在,完整的地址表单应如下所示:
- 在不同设备上试用您的表单。您定位了哪些设备和浏览器?怎么可能 如何改进表单?
您可以通过以下几种方式在不同设备上测试表单:
- 使用 Chrome DevTools 的 Device Mode 来模拟移动设备
- 将网址从计算机发送到手机。
- 使用 BrowserStack 等服务对范围进行测试 各种设备和浏览器
更进一步
Google Analytics 和真实用户监控: 针对真实用户进行测试和监控,测试和监控您表单设计的性能和易用性; 并检查更改是否成功您应监控加载性能和其他网页指标, 以及页面分析(未完成地址表单就跳出去的用户所占的比例 呢?用户会在您的地址表单页花多长时间?)和互动分析(哪个网页) 组件是否会交互?)
您的用户位于哪些地区?他们如何设置自己的地址格式?他们使用什么名称作为地址 组件(例如邮政编码)?关于邮政地址的强制指南 提供了实用的链接和详尽的指导,详细说明了 200 多个国家/地区的地址格式。
国家/地区选择器因易用性不佳而广为人知。 最好避免在很长的项目列表中选择元素 根据 ISO 3166 国家/地区代码标准,目前列出了 249 个国家/地区! 您可以考虑使用如下替代方法,而不是
<select>
: 贝伊马德研究所国家/地区选择器。您能为包含大量项的列表设计一个更好的选择器吗?您如何确保您的设计 可在各种设备和平台上访问?(
<select>
元素不适用于 但至少可以在所有浏览器和辅助设备上使用!)博文 <input type="country"/> 讨论 国家/地区选择器标准化的复杂性。国家/地区名称的本地化可能还包括 问题。国家/地区列表中的工具 以多种格式下载多种语言的国家/地区代码和名称。