地址表单最佳实践 Codelab

Sam Dutton

如需完成此 Codelab，请在第二个标签页中打开 this Glitch。

如何设计适用于各种姓名和地址格式的表单？未成年人形式 小故障会令用户感到不快，可能会导致用户离开您的网站或放弃完成购买 或注册。

此 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 属性与labelinput 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 中重新加载页面，然后点按或点击名称输入框。您发现了什么差异？

注意 ：想知道如何删除 Chrome 中的自动填充建议吗？* Windows：Shift + delete * Mac：Shift + fn + delete

您应该会注意到一个细微变化：采用 autocomplete="name" 后，建议现在更加具体 之前在表单输入中使用且还具有 autocomplete="name" 的值。浏览器 这不仅仅是猜测合适的内容：您拥有控制权。您还会看到管理... 选项查看并编辑您的浏览器存储的名称和地址。

<ph type="x-smartling-placeholder">

</ph>

使用猜测值自动填充界面与自动填充界面

。

。

注意 ：如果对 input、select 或 textarea 有适当的自动补全值，则应使用该值！

现在添加限制条件验证属性 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 表示...必填！浏览器将不允许提交缺少以下数据的表单： ，并且会在您尝试提交输入内容时发出警告，并突出显示相应内容。无需额外的代码 必填！

。

注意： 此 Codelab 未涉及 (😜?) 本地化或国际化。您需要考虑地址格式以及用于地址组成部分的不同名称，具体取决于您的用户所在的地理位置（甚至是同一语言的对应语言：邮编、邮编、爱尔兰邮政编码还是 PIN 码）您的网站可能需要针对多个语言区域进行自定义，但此 Codelab 中的地址表单专为实现灵活性而设计，并且“足够有效”特定 IP 地址范围

要测试带有和不带这些属性的表单工作方式，请尝试输入数据：

• 请尝试输入不符合 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）。

。 <ph type="x-smartling-placeholder">

</ph>

使用 Enterkeyhint 属性设置 Enter 按钮标签： “下一步”和“完成”即可。

。

使用 type="number" 可添加一个向上/向下箭头以递增数字，该方法不适用于电话号码、支付卡或账号等数据。对于电话号码，您应使用 type="tel"。对于其他数字，请使用 type="text"（或省略该属性，因为 text 是默认值），然后添加 inputmode="numeric" 以在移动设备上显示数字键盘。

。

注意 ：您是否发现使用单个电话号码输入电话号码时有任何问题吗？你们是否单独存储电话号码的组成部分（国家/地区代码和区号）？如果是，原因是什么？

现在，完整的地址表单应如下所示：

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

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

• 使用 Chrome DevTools 的 Device Mode 来模拟移动设备
• 将网址从计算机发送到手机。
• 使用 BrowserStack 等服务对范围进行测试 各种设备和浏览器

。

注意 ：在开始构建表单之前，请务必了解所需的数据以及这些数据是否是绝对必要的。不要要求提供不需要的数据！降低表单复杂性并加强隐私保护的最简单方法是移除不必要的字段。减少存储的数据还会降低后端数据费用和负担。

更进一步

• Google Analytics 和真实用户监控： 针对真实用户进行测试和监控，测试和监控您表单设计的性能和易用性； 并检查更改是否成功您应监控加载性能和其他网页指标， 以及页面分析（未完成地址表单就跳出去的用户所占的比例 呢？用户会在您的地址表单页花多长时间？）和互动分析（哪个网页） 组件是否会交互？）

• 您的用户位于哪些地区？他们如何设置自己的地址格式？他们使用什么名称作为地址 组件（例如邮政编码）？关于邮政地址的强制指南 提供了实用的链接和详尽的指导，详细说明了 200 多个国家/地区的地址格式。

• 国家/地区选择器因易用性不佳而广为人知。 最好避免在很长的项目列表中选择元素 根据 ISO 3166 国家/地区代码标准，目前列出了 249 个国家/地区！ 您可以考虑使用如下替代方法，而不是 <select>： 贝伊马德研究所国家/地区选择器。

  您能为包含大量项的列表设计一个更好的选择器吗？您如何确保您的设计 可在各种设备和平台上访问？（<select> 元素不适用于 但至少可以在所有浏览器和辅助设备上使用！）

  博文 <input type="country"/> 讨论 国家/地区选择器标准化的复杂性。国家/地区名称的本地化可能还包括 问题。国家/地区列表中的工具 以多种格式下载多种语言的国家/地区代码和名称。