label的for属性必须严格匹配tel输入框的id，否则点击无效且无障碍失效；常见错误包括漏写id、大小写或连字符不一致；type="tel"无内置校验，需配合pattern或JS实现。
label 的 for 属性必须严格匹配 tel 输入框的 id
不配对就等于没写 label——点击文字不会聚焦输入框，无障碍支持直接失效。浏览器只认 for 和 id 的字符串完全一致（区分大小写），空格、下划线、连字符都不能错。
常见错误：<label for="phone">电话</label><input type="tel" name="tel">（漏掉 id）；或 id="phone-input" 但 for="phone"（不一致）。
- 务必给
<input type="tel">显式设置id，且值与label的for完全相同 - 避免用
name或其他属性替代id，for不读取它们 - 如果用框架（如 React），注意 JSX 中
htmlFor是for的 prop 名，不是for
type="tel" 本身不校验格式，别指望它自动拦错号
很多开发者以为加了 type="tel" 就能阻止用户输字母或超长数字，其实它只是触发手机端数字键盘、提供基础语义，**完全不带内置校验逻辑**。提交时照样能过，后端或 JS 得自己兜底。
-
type="tel"在桌面端几乎无行为差异，主要影响移动端软键盘类型 - 需要格式限制？得靠
pattern（正则）、minlength/maxlength，或 JS 监听input事件过滤 - 例如国内手机号常用：
<input type="tel" id="phone" pattern="^1[3-9]\d{9}$">，但注意pattern只在表单提交时触发，不阻止实时输入
label 包裹 input 时不用 for/id，但有隐藏风险
可以写成 <label>电话<input type="tel" id="phone"></label>，这样确实不需要 for 和 id，点击文字也能聚焦。但问题在于：一旦 label 内容变复杂（比如加了 <span>、图标、条件文案），或者未来要动态控制 label 文本（React/Vue 中 re-render），容易意外破坏包裹结构，导致聚焦失效。
立即学习“前端免费学习笔记（深入）”；
- 显式
for/id配对更稳定，DOM 拆分也不影响功能 - 如果坚持包裹写法，请确保
input是label的**直接子节点**，中间不能有文本节点或换行符（HTML 空白符会被解析为文本节点） - 可读性上，分离写法更利于维护，尤其多人协作或组件化场景
移动端点击 label 有时失焦，和 touch 事件冲突有关
在 iOS Safari 或部分安卓 WebView 中，点击 label 后输入框短暂聚焦又立即失焦，大概率是页面监听了 touchstart 或 click 并调用了 event.preventDefault()，或者有第三方库（如 fastclick）干扰了原生 click 事件冒泡。
- 先检查是否有全局
touchstart监听器，特别是阻止默认行为的 - 确认
label和input都没设pointer-events: none或user-select: none - 临时加个
console.log在label的click回调里，看是否被拦截或重复触发
真正难调试的点往往不在 label 或 tel 本身，而在它和页面其他交互层的耦合——比如一个弹窗组件顺手禁了 body 的所有 touch，结果把 label 的 click 也吃了。
