本文详解如何在 HTML 表单中为城市（city）、州（state）和邮政编码（zip code）正确设置 autocomplete 属性，澄清 MDN 文档中关于 address-level1/address-level2 的常见误解，并提供符合 WHATWG 规范的实践方案。
本文详解如何在 html 表单中为城市（city）、州（state）和邮政编码（zip code）正确设置 `autocomplete` 属性，澄清 mdn 文档中关于 `address-level1`/`address-level2` 的常见误解，并提供符合 whatwg 规范的实践方案。
在构建支持浏览器自动填充的地址表单时，准确使用 autocomplete 属性至关重要。尽管 MDN 文档曾存在一处易引发混淆的表述（称 address-level2 “仅应在 street-address 不存在时使用”），但根据 WHATWG HTML 规范，该限制实际适用于 address-line1/address-line2 等行级地址字段，而非 address-level* 系列属性。address-level1、address-level2 和 postal-code 是彼此正交、可共存的独立语义化值，专用于描述行政地理层级，与 street-address 完全兼容。
对于美国地址（US-based addresses），推荐的标准用法如下：
-
州（State）：使用
autocomplete="address-level1" -
城市（City）：使用
autocomplete="address-level2" -
邮政编码（ZIP Code）：使用
autocomplete="postal-code" -
街道地址（Street Address）：仍可同时使用
autocomplete="street-address"
✅ 正确示例（完整地址片段）：
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
⚠️ 注意事项：
-
address-level1在美国对应“州”（如CA），在其他国家可能对应省、大区或一级行政区（如中国的“省”、日本的“都道府県”）； -
address-level2通常指城市、镇或县级行政单位，不是“第二行街道地址”（那是address-line2）； - 避免混用
address-line*与street-address—— 二者语义重叠，浏览器可能忽略后者或触发不可预测行为； - 浏览器对
address-level3/address-level4支持有限，建议仅在必要时谨慎使用（如中国需细化到“区/县”+“街道”时，优先考虑业务逻辑而非依赖自动填充）； - 始终配合
<label></label>提升可访问性，且确保autocomplete值严格匹配规范定义（大小写敏感，不可空格或拼写错误）。
总结而言，street-address 与 address-level1/address-level2/postal-code 不仅可以共存，而且是构建高可用、无障碍、跨浏览器兼容地址表单的最佳实践组合。开发者应以 WHATWG 规范为准，理性看待文档历史笔误，聚焦语义清晰与用户实际填充体验。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
