您如何设计一个表单，使其适用于各种名称和地址格式？轻微的表单故障会让用户感到不快，并可能导致他们离开您的网站或放弃完成购买或注册。
此 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... 选项，用于查看和修改浏览器存储的名称和地址。
现在添加约束条件验证属性
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）。
完整的地址表单现在应如下所示：
- 在不同设备上尝试填写表单。您定位的是哪些设备和浏览器？表单应该如何改进？
您可以通过多种方式在不同设备上测试表单：
- 使用 Chrome DevTools Device Mode 来模拟移动设备。
- 将网址从计算机发送到手机。
- 使用 BrowserStack 等服务在各种设备和浏览器上进行测试。
更进一步
Analytics 和 Real User Monitoring：针对真实用户测试和监控表单设计的性能和易用性，并检查更改是否成功。您应监控加载性能和其他网页指标，以及网页分析（有多少用户未填写地址表单而跳出？用户在地址表单页面上停留的时间有多长？）和互动分析（用户与哪些网页组件互动，或不互动？）
您的用户位于何处？他们如何设置地址格式？这些地址组件（例如邮政编码）使用什么名称？Frank 的邮政地址强制指南提供了实用的链接和大量指南，详细介绍了 200 多个国家/地区的地址格式。
国家/地区选择器因易用性不佳而广为人知。最好避免为冗长的项目列表选择元素，而 ISO 3166 国家/地区代码标准目前列出了 249 个国家/地区！您可能需要考虑替代方案，例如 Baymard Institute 国家/地区选择器，而不是
<select>。您能为包含大量项的列表设计更好的选择器吗？如何确保您的设计适用于各种设备和平台？（
<select>元素不适用于大量项目，但至少它几乎可以在所有浏览器和辅助设备上使用！）博文 <input type="country" /> 讨论了国家/地区选择器标准化的复杂性。国家/地区名称的本地化也可能有问题。国家/地区列表具有一个以多种格式下载国家/地区代码和名称的工具。