如何设计一个适用于各种名称和地址格式的表单？表单出现的小问题会让用户感到不快，可能会导致他们离开您的网站，或放弃完成购买或注册。
此 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" 的表单输入中使用过的特定值。浏览器不会仅凭猜测来确定合适的字体，而是由您来控制。您还会看到管理…选项，用于查看和修改浏览器存储的姓名和地址。
现在，添加约束条件验证属性
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" /> 介绍了标准化国家/地区选择器的复杂性。国家/地区名称的本地化也可能存在问题。国家/地区列表提供了一个工具，可让您以多种语言和多种格式下载国家/地区代码和名称。