创建一个表单，让用户在桌面设备和移动设备上都能尽可能轻松地输入地址数据。确保表单充分利用内置浏览器功能进行自动填充、验证和数据输入限制。
如何实现
下面列出了构建成功地址表单的最重要准则。
使用有意义且有效的 HTML
充分利用专为创建表单而设计的元素和属性：
<form>、<input>、<label>和<button>type、autocomplete和inputmode
这些元素可启用内置浏览器功能、提高无障碍性，并为标记添加含义。
使用 <label> 元素为用于输入数据的表单字段添加标签
如需为 <input>、<select> 或 <textarea> 添加标签，请使用 <label>。通过为标签的 for 属性指定与输入的 id 相同的值，将标签与输入相关联。
充分利用 HTML 属性
使用适当的 <input> 元素 <type> 属性，在移动设备上提供合适的键盘，并启用浏览器的基本内置验证功能，让用户可以轻松输入数据。
请始终使用 type="email" 表示电子邮件地址，使用 type="tel" 表示电话号码。
<!-- type="email"/"tel" gives mobile users the right keyboard and enables built-in validation -->
<input type="email" id="email" name="email" autocomplete="email" required>
<input type="tel" id="phone" name="phone" autocomplete="tel">
每个 <input>、<select> 和 <textarea> 元素都应具有适当的 autocomplete 属性，以提高无障碍性并帮助用户避免重新输入数据。
让按钮发挥作用
使用 <button> 表示按钮。您也可以使用 <input type="submit">，但不要使用 div 或其他一些随机元素作为按钮。按钮元素提供无障碍行为、内置表单提交功能，并且可以轻松设置样式。
为每个表单提交按钮指定一个值，用于说明其功能。对于结账流程中的每个步骤，请使用描述性的号召性用语，以显示进度并明确下一步。例如，将配送地址表单上的提交按钮标记为继续付款，而不是继续或保存。
尽可能使用单个名称输入
允许用户使用单个输入框输入姓名，除非您有充分的理由单独存储名字、姓氏、敬称或其他姓名部分。使用单个姓名输入框可降低表单的复杂性，支持剪切和粘贴，并使自动填充更简单。
允许使用国际名称。进行验证时，请避免使用仅匹配拉丁字符的正则表达式。“仅限拉丁字符”会排除姓名或地址中包含非拉丁字母字符的用户。而是应允许 Unicode 字母匹配，并确保您的后端安全地支持 Unicode 作为输入和输出。现代浏览器对正则表达式中的 Unicode 提供了良好的支持。
允许使用各种地址格式
在构建地址表单时，请注意地址格式的多样性，即使在同一个国家/地区也是如此。不要对“正常”地址做出假设。
尽可能使用单个 <textarea> 元素来表示街道地址。
<!-- textarea handles multi-line international address formats that split inputs can't accommodate -->
<textarea id="address" name="address" autocomplete="street-address" required></textarea>
对于各种本地和国际地址格式，这是最灵活的选项。
如果您的数据模型需要单独的地址行，请在每行中使用一个 <input>，并搭配使用 address-line1、address-line2（以及 address-line3，如果需要）autocomplete 令牌，以便自动填充功能仍能正常运行。请勿将街道地址拆分到不含这些标记的输入字段中，并且仅将第一行设为必填项。
<!-- Alternative: one input per line, each with its own autocomplete token -->
<input type="text" id="address-line1" name="address-line1" autocomplete="address-line1" required>
<input type="text" id="address-line2" name="address-line2" autocomplete="address-line2">
帮助用户避免意外遗漏数据字段
为必填字段添加 required 属性。
<input type="text" id="city" name="city" autocomplete="address-level2" required>
后备策略
自动填充是一项渐进增强功能。在不支持自动填充功能的浏览器中，用户只需手动输入其详细地址。语义 HTML 限制（例如 type、inputmode 和 required）仍会作为标准表单验证正常运行。