应根据语义和交互需求选择input的type属性：number用于纯数字，email仅限邮箱，tel弹数字键盘，search带清空按钮；label必须用for+id或嵌套绑定；name属性决定提交字段，不可缺失；原生验证需用novalidate禁用默认提示，配合setCustomValidity自定义。
表单里 <input> 的 type 属性到底怎么选
选错 type 是表单出问题的第一原因：不是提交不了，就是移动端弹错键盘，或者浏览器自动补全乱套。别只写 type="text" 一招鲜。
常见错误现象：type="number" 却要输带单位的值（比如“12px”），结果输入框清空、onchange 不触发；type="email" 在非邮箱场景（如用户名）被 Safari 强制校验格式，用户输“admin@local”直接报错。
-
type="search"：适合搜索框，会自动加清空按钮，且在 Safari 中触发放大镜图标 -
type="tel"：不校验格式，但 iOS 会弹数字键盘 + 符号键，比text更友好 -
type="password"和type="text"切换时，注意 DOM 复用会导致 value 清空（Chrome 尤其明显），需要手动同步value或重置input元素 - 密码明文切换推荐用
type="text"+inputmode="text"控制键盘，而非改type
label 和 input 怎么绑定才真正生效
光写 <label>用户名</label><input> 没用——焦点不会进输入框，屏幕阅读器也读不到关联关系。
必须用 for 和 id 配对，或把 input 套进 label 里。前者更灵活（比如 label 在 input 上方或右侧），后者更少出错。
立即学习“前端免费学习笔记（深入）”；
-
<label for="uname">用户名</label><input id="uname" name="username">——for值必须和id完全一致（大小写敏感） -
<label>邮箱<input name="email"></label>—— 这种写法下，name不是必须的，但建议保留，方便后端接收 - 别用
aria-label替代真实label，它不触发点击聚焦，也不参与表单可访问性树的完整构建
form 提交时 name 属性为什么总丢数据
没设 name 的 <input>，无论有没有 value，都不会出现在提交数据里——这是规范行为，不是 bug。
容易踩的坑：用 id 或 data-name 代替 name；动态生成表单时漏写 name；禁用（disabled）的控件也会被忽略，要用 readonly 代替。
-
name值不能含空格或方括号以外的特殊字符（如user[email]合法，user.email在部分后端解析失败） - 多个同名
radio是正常设计，最终只提交一个选中的值；同名checkbox则提交所有勾选项（数组形式） - 隐藏域
<input type="hidden" name="token" value="abc">必须有name，否则 CSRF token 白写了
HTML 表单原生验证失败时的提示怎么控制
浏览器默认的红色边框 + 弹窗提示很丑，且无法用 CSS 完全覆盖。想自定义，得先理解触发时机和 API。
关键点：原生验证只在表单提交或调用 checkValidity() 时触发，input 实时输入不触发（除非加 required 后删空）。
- 禁用默认提示：给
form加novalidate属性，然后自己用setCustomValidity()和reportValidity() -
setCustomValidity("请输入手机号")设为空字符串才能恢复有效状态 - 样式控制靠
:valid/:invalid伪类，但注意：它们在用户还没输过时也生效（初始状态），需配合:user-invalid（Chrome/Edge 支持，Firefox 不支持）做更精准判断
