应使用语义化 标签配合精准 autocomplete 值：姓名用 name="name"、手机号 autocomplete="tel"、省 address-level1、市 address-level2、详细地址 street-address、邮编 postal-code；禁用 ，统一用 保障自动填充与无障碍体验。
怎么用
浏览器对地址字段没有强制校验逻辑，但正确使用 的 name、autocomplete 和 type 属性，能显著提升自动填充成功率和无障碍体验。
-
autocomplete值必须严格匹配规范（如"street-address"、"address-level1"），错一个字符就失效 - 中国地址不用
address-level2（那是“区/县”以下的“镇/街道”，国内极少需要单独采集） -
type="text"是安全选择；type="search"或type="tel"会触发移动端错误键盘或格式限制 - 省市区三级联动不是 HTML 能解决的——
需配合 JS 数据源，纯 HTML 只能静态写死或留空
中国地址字段该用哪些 autocomplete 值
Chrome、Safari、Edge 都依赖 autocomplete 属性触发地址自动填充，但中文场景下常填错。关键不是“翻译”，而是对照 WHATWG 规范映射。
- 收件人姓名：
autocomplete="name"（不是"full-name"） - 手机号：
autocomplete="tel"（不是"phone"） - 省：
autocomplete="address-level1"（对应或） - 市：
autocomplete="address-level2"（注意：国内“市”是 level2，“省”才是 level1） - 详细地址：
autocomplete="street-address"（可含门牌号，不拆“街道+门牌”） - 邮编：
autocomplete="postal-code"（别写成"zip"）
为什么
看似合理，实则破坏自动填充流程。浏览器在遇到 时，基本放弃对该字段的地址类型识别。
-
才支持autocomplete="street-address" -
没有对应的autocomplete值，填了也无效 - 如果真需要多行（比如单位地址带楼层/房间号），用
+ CSSwhite-space: pre-line更可控 - 移动端软键盘在
上默认唤起换行键，用户易误按导致表单提前提交
表单提交前容易被忽略的兼容性坑
地址字段本身不报错，但组合使用时会暴露底层差异。
- Firefox 对
autocomplete="address-level1"支持弱，建议同时加name="province"便于后端识别 - iOS Safari 在
里输入中文后，有时不触发autocomplete下拉，需手动长按粘贴建议项 - 所有地址
必须有name属性，否则 POST/GET 时字段直接消失（哪怕用了id） - 不要给地址字段设
required后又隐藏部分字段（如“区”非必填），会导致 Chrome 校验失败却无提示
地址字段的复杂性不在标签数量，而在每个 autocomplete 值是否精准、每个 name 是否与后端约定一致、以及移动端真实用户是否真的能顺滑填完——这些细节没对齐，再多的“完整集合”也只是摆设。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
