如何设计一个适用于各种名称和地址格式的表单？表单出现的小问题会让用户感到不快，可能会导致他们离开您的网站，或放弃完成购买或注册。
此 Codelab 介绍了如何构建适用于大多数用户的易用型表单。
第 1 步：充分利用 HTML 元素和属性
在本 Codelab 的这一部分，您将从一个空白表单开始，其中只有标题和按钮。然后，您将开始添加输入。（已包含 CSS 和少量 JavaScript）。
点击 Remix to Edit 即可修改项目。
使用以下代码向
<form>元素添加 name 字段：
<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>
您会看到邮政编码是选填字段，这是因为许多国家/地区不使用邮政编码。（全球信息手册提供了 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 等服务在各种设备和浏览器上进行测试。
进一步了解
分析和真实用户监控：可针对真实用户测试和监控表单设计的效果和易用性，并检查更改是否成功。您应监控加载性能和其他网页指标，以及网页分析（有多少比例的用户因为未完成地址表单而跳出该表单？用户在地址表单页面上花了多长时间？）和互动分析（用户与哪些页面组件互动，或不与哪些页面组件互动？）
您的用户位于哪些地区？他们如何设置自己的地址格式？他们对地址组件（例如邮政编码）使用什么名称？Frank's Compulsive Guide to Postal Addresses（Frank 的邮政地址强迫症指南）提供了实用的链接和详尽的指南，详细介绍了 200 多个国家/地区的地址格式。
国家/地区选择器因易用性差而广为人知。最好避免在很长的项目列表中选择元素，并且 ISO 3166 国家/地区代码标准目前列出了 249 个国家/地区！您可以考虑使用 Baymard Institute 国家/地区选择器等替代方案，而不是
<select>。您能否为包含大量项的列表设计更好的选择器？您如何确保您的设计可在各种设备和平台上访问？（
<select>元素不适用于大量项，但至少它适用于几乎所有浏览器和辅助设备！）博文 <input type="country" /> 介绍了标准化国家/地区选择器的复杂性。国家/地区名称的本地化也可能存在问题。国家/地区列表具有用于以多种格式下载多种语言的国家/地区代码和名称的工具。