地址表单最佳实践 Codelab

如何设计一个适用于各种名称和地址格式的表单?表单出现的小问题会让用户感到不快,可能会导致他们离开您的网站,或放弃完成购买或注册。

此 Codelab 介绍了如何构建适用于大多数用户的易用型表单。

在本 Codelab 的这一部分,您将从一个空白表单开始,其中只有标题和按钮。然后,您将开始添加输入。(已包含 CSS 和少量 JavaScript)。

  • 点击 Remix to Edit 即可修改项目。

  • 使用以下代码向 <form> 元素添加 name 字段:

<section>
  <label for="name">Name</label>
  <input id="name" name="name">
</section>

这看起来可能很复杂,而且只是针对一个名称字段,但它已经完成了很多工作。

通过将 labelfor 属性与 inputnameid 匹配,您已将 labelinput 相关联。点按或点击标签会将焦点移至其输入框,使其成为比输入框本身大得多的目标,这对手指、拇指和鼠标点击都很有帮助!当标签或标签的输入框获得焦点时,屏幕阅读器会读出标签文本。

name="name" 又是什么情况呢?这是与此输入中的数据关联的名称(恰好是“name”!),这些数据会在提交表单时发送到服务器。添加 name 属性还意味着 FormData API 可以访问此元素中的数据。

第 2 步:添加属性以帮助用户输入数据

在 Chrome 中点按或点击名称输入框时,会发生什么情况?您应该会看到浏览器存储的自动填充建议,并且根据其 nameid 值,这些建议适合此输入。

现在,将 autocomplete="name" 添加到输入代码中,如下所示:

<section>
  <label for="name">Name</label>
  <input id="name" name="name" autocomplete="name">
</section>

在 Chrome 中重新加载页面,然后点按或点击名称输入框。您发现了什么差异?

您应该会注意到一个细微的变化:使用 autocomplete="name" 后,建议现在是之前在也包含 autocomplete="name" 的表单输入中使用过的特定值。浏览器不会仅凭猜测来确定合适的字体,而是由您来控制。您还会看到 Manage... 选项,用于查看和修改浏览器存储的名称和地址。

两张 Android 手机上 Chrome 的屏幕截图,显示一个包含单个输入字段的表单,其中一个包含自动补全值,另一个不包含。一个显示浏览器界面启发词语建议值;另一个显示有存储的自动补全值时的界面。
自动填充(使用猜测值)与自动补全的界面。

现在,添加约束条件验证属性 maxlengthpatternrequired,使输入代码如下所示:

<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 个不同国家/地区的地址格式信息,包括地址示例。)使用国家/地区标签,而不是国家/直辖市/自治区/省,因为完整列表中的某些选项(例如英国)并非单个国家/地区(尽管值为 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 键按钮图标。
使用 Enterkeyhint 属性来设置 Enter 按钮标签:“下一步”和“完成”。

现在,完整的地址表单应如下所示:

  • 在不同的设备上试用您的表单。您定位了哪些设备和浏览器?如何改进表单?

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

进一步了解

  • 分析和真实用户监控:可针对真实用户测试和监控表单设计的效果和易用性,并检查更改是否成功。您应监控加载性能和其他网页指标,以及网页分析(有多少比例的用户因为未完成地址表单而跳出该表单?用户在地址表单页面上花了多长时间?)和互动分析(用户与哪些页面组件互动,或不与哪些页面组件互动?)

  • 您的用户位于哪些地区?他们如何设置自己的地址格式?他们对地址组件(例如邮政编码)使用什么名称?Frank's Compulsive Guide to Postal Addresses(Frank 的邮政地址强迫症指南)提供了实用的链接和详尽的指南,详细介绍了 200 多个国家/地区的地址格式。

  • 国家/地区选择器因易用性差而广为人知。最好避免在很长的项目列表中选择元素,并且 ISO 3166 国家/地区代码标准目前列出了 249 个国家/地区!您可以考虑使用 Baymard Institute 国家/地区选择器等替代方案,而不是 <select>

    您能否为包含大量项的列表设计更好的选择器?您如何确保您的设计可在各种设备和平台上访问?(<select> 元素不适用于大量项,但至少它适用于几乎所有浏览器和辅助设备!)

    博文 <input type="country" /> 介绍了标准化国家/地区选择器的复杂性。国家/地区名称的本地化也可能存在问题。国家/地区列表具有用于以多种格式下载多种语言的国家/地区代码和名称的工具。