label标签必须用for属性绑定select的id才能确保可访问性，否则点击文字无法聚焦下拉框；for值须严格匹配唯一id，不可含空格或大小写错误，动态渲染时需同步生成且去重。
label 标签必须用 for 属性绑定 select 的 id，否则点击文字无法聚焦下拉框——这是最常被忽略的可访问性断点。
label 的 for 必须严格匹配 select 的 id
浏览器靠 for 和 id 的字符串完全一致来建立关联。哪怕多一个空格、大小写不一致、或用了 class 而非 id，点击 label 文字就无效。
-
for值必须是纯字符串，不能是变量或表达式（如for="{{id}}"在纯 HTML 中不生效） -
id在整个页面中必须唯一；重复的id="city"会导致部分 label 失效 - 如果
select是动态生成的（比如 Vue/React 渲染），确保id和for同步生成，且不重复
不写 for 也能“工作”，但会丢掉关键能力
把 select 直接包在 label 里（隐式关联）看似省事，但实际限制很多：
- 无法在
label和select之间插入其他元素（比如帮助图标、错误提示） - 屏幕阅读器对隐式关联的支持不如显式
for/id稳定 - CSS 选择器
label[for="xxx"] + select这类相邻兄弟定位会失效 - 某些旧版 Safari 对嵌套结构的焦点行为有异常
表单提交时，label 不传值，但影响 select 的初始状态
label 本身没有 name 或 value，它不参与数据提交。但它直接影响用户能否顺利操作 select：
立即学习“前端免费学习笔记（深入）”；
- 没正确绑定时，移动端用户可能要点两次（先点文字再点下拉箭头）才能展开菜单
- 键盘用户按 Tab 进入
select时，若无有效 label，屏幕阅读器可能只读 “combobox”，不读提示文字（如“请选择城市”） - 如果
select有required属性，但 label 没绑定，用户容易忽略必填项
带占位提示的 option 要配合 disabled selected
“请选择…”这类引导项不是装饰，而是防止用户误提交空值的关键设计：
- 写成
<option value="" disabled selected>请选择城市</option>，这样它显示但不可再选 - 不要只写
selected而不加disabled，否则用户还能手动切回去，导致value=""被提交 - 后端接收时，要明确检查
request.form.get("city") != ""，不能只判空字符串
真正麻烦的不是写错语法，而是上线后才发现：视障用户反馈“点不了城市选项”，或者 A/B 测试显示表单放弃率高了一截——那大概率是 label 和 select 的绑定断了，而且没人手动测过鼠标点击文字这个动作。
