type="hidden"是唯一真正隐藏且参与提交的HTML5表单字段方式；它不渲染、不聚焦、不触发事件，但会随表单提交，而display:none等仅视觉隐藏仍参与验证和自动填充。
怎么让 HTML5 表单字段真正隐藏又不影响提交
用 type="hidden" 是唯一可靠方式。其他“视觉隐藏”手段（比如 display: none、visibility: hidden、opacity: 0）只是藏起来，字段依然参与表单交互和验证，还可能被自动填充或焦点捕获。
-
type="hidden"字段不渲染、不聚焦、不触发input或change事件，但会随表单一起提交 - 别用
disabled属性隐藏——它会让字段值被忽略，不提交 - 别用
readonly模拟隐藏——它仍可见、可聚焦、可被复制，且某些浏览器会参与自动填充
为什么 display: none 的 input 还在提交或报错
因为 CSS 隐藏不等于语义隐藏。浏览器照常解析该元素：表单序列化时包含它，内置验证（如 required）照样检查，甚至密码管理器都可能把它当有效字段处理。
- 现象：表单提交失败，控制台报
Constraint validation: Input field is required，但你看不到那个字段 - 原因：用了
display: none却保留了required或pattern - 修复：要么删掉验证属性，要么改用
type="hidden"（此时验证属性自动失效）
type="hidden" 和 JavaScript 动态赋值的配合要点
它适合存服务端下发的 token、用户 ID、页面上下文等只读状态。但要注意 JS 赋值时机和 DOM 存在性。
- 确保 DOM 加载完成后再操作：
document.getElementById("my-hidden")要在<input>元素已存在时调用 - 不要依赖
value的初始 HTML 值做逻辑判断——它可能为空，应由 JS 显式设置 - 避免重复设置：多次赋值没问题，但若绑定到频繁更新的状态，注意是否引发意外重提交
移动端键盘弹出、自动填充干扰隐藏字段怎么办
只要用的是 type="hidden"，这些干扰就不存在。所有现代浏览器（包括 iOS Safari、Chrome Android）对它的处理完全一致：不显示、不聚焦、不纳入自动填充候选。
- 错误做法：用
type="text"+style="position: absolute; left: -9999px"—— iOS 仍可能唤起键盘 - 正确做法：坚持用
type="hidden"，哪怕你需要“临时显示再隐藏”，也应在逻辑层控制，而非样式层伪装 - 兼容性提醒：IE6+ 全支持
type="hidden"，无需 polyfill
最容易被忽略的是：把 type="hidden" 放在 <form> 外面——它就不会提交。必须确保它在表单内部，且 name 属性不为空。
立即学习“前端免费学习笔记（深入）”；
