手机端表单必须结构、语义、触摸交互三者同步处理：label与input须显式for/id绑定（隐式包裹在iOS VoiceOver下易断联），for与id逐字符一致；点击区≥48×48px，用label包裹+padding扩展；type需匹配意图（如tel/email/date）；错误提示须预置DOM、textContent更新、aria-invalid与aria-describedby配对，且初始加载即生效。
手机端表单控件不能靠“调宽一点、加个padding”就完事，必须从结构、语义、触摸交互三方面同步处理，否则用户点不准、输不对、看不到错误，不是体验差，是根本用不了。
label 和 input 必须显式绑定 for/id
隐式包裹（<label>姓名<input></label>）在 iOS VoiceOver 下极易断开关联，尤其 JS 动态插入节点后，屏幕阅读器可能完全读不出字段名。
-
for和id值必须逐字符一致：大小写、下划线、空格都不能错，for="user_name"只能配id="user_name" - React/Vue 等框架中动态生成 ID 时，确保
htmlFor和id同步更新，别硬编码字符串 - 用 DevTools 的 Accessibility 面板实时验证：
<label>的 “Name” 是否可读、是否指向正确<input>
点击区域必须 ≥48×48px，且 label 要能触发 focus
原生 <input type="checkbox"> 视觉尺寸常只有 16×16px，手指根本点不中；只设 width/height 会破坏渲染，iOS 还可能丢焦点。
- 用
<label>包裹 +padding: 12px+display: block扩展可触区域，真实点击区立刻达标 - 禁用
pointer-events: none或opacity: 0在<label>上——这会让它失去聚焦能力 - 自定义复选框时，真实
<input>必须在<label>内，再用position: absolute覆盖，保留完整点击区
input type 要匹配输入意图，别依赖 placeholder
placeholder 一输入就消失，用户容易忘字段用途；而错用 type="text" 会导致键盘弹错，比如输手机号却调出全键盘。
立即学习“前端免费学习笔记（深入）”；
- 电话号码用
<input type="tel">，邮箱用<input type="email">，日期用<input type="date"> -
type="number"不等于“只能输数字”——它仍允许粘贴字母，校验必须靠 JS 或pattern - 标签
<label>必须始终可见，placeholder仅作格式示例（如yourname@example.com）
错误提示必须预置 DOM + textContent 更新 + aria-invalid 配对
JS 动态插入 <div class="error"> 后，TalkBack/NVDA 经常不播报，因为元素没进可访问性树，或被系统吞掉。
- 错误容器（如
<div id="email-error"></div>）必须在 HTML 加载时就存在，哪怕内容为空 - 只用
el.textContent = "邮箱格式不对"更新，禁用innerHTML（XSS + 可访问性树不刷新） -
aria-invalid="true"必须配aria-describedby="email-error"，多个错误用空格分隔 - 提交失败后，调用
input.focus()移动焦点到首个错误字段，别只改边框颜色
最常被忽略的是：所有这些优化都得在页面初始加载时就生效，不能等 JS 加载完才补；否则首屏表单对屏幕阅读器用户就是“不可见+不可操作”的黑盒。
