type="hidden"是专为隐藏提交设计的语义化表单控件，不渲染ui、参与提交、无障碍友好；而display:none或hidden属性仅视觉隐藏，存在聚焦、语义混乱及意外显示等风险。
用 type="hidden" 最安全也最语义正确
隐藏输入框的首要目的通常是提交数据但不展示给用户，type="hidden" 就是为此设计的。它不会渲染任何 UI，但会参与表单提交，且被屏幕阅读器忽略（符合无障碍规范）。
常见错误是用 display: none 或 visibility: hidden 隐藏 type="text" 输入框——这看似可行，但存在隐患：某些旧版浏览器或辅助技术可能仍尝试聚焦它；更重要的是，语义上它本就不该是“可见输入”的变体。
-
<input type="hidden" name="token" value="abc123">是标准写法，直接可用 - 不要给
type="hidden"加id后用 JS 操作其value再触发change事件——它不响应用户交互，change事件基本不会触发，改值后无需额外 dispatch - 服务端必须校验该字段，因为客户端值可被任意篡改（所有隐藏字段都如此）
为什么不用 display: none 配合普通 input
有人习惯写 <input type="text" style="display:none" name="id">，问题在于：
- 它仍能被 Tab 键聚焦（尤其在未禁用
tabindex时），可能打断键盘导航流程 - 某些自动化测试工具或表单序列化库（如 jQuery
$('form').serialize()）会照常包含它，但语义混乱 - 若后续 CSS 被覆盖或 JS 动态移除样式，它可能意外显示，造成 UI 泄露或布局错乱
- 不符合 HTML5 表单规范对“隐藏控件”的定义，W3C 推荐仅用
type="hidden"
hidden 属性和 type="hidden" 的区别
hidden 是全局布尔属性，作用于任意元素，包括 <input type="text" hidden>。但它和 type="hidden" 完全不同：
-
type="hidden"：是表单控件类型，参与提交，无渲染，不可聚焦，无障碍友好 -
hidden属性：只是视觉隐藏（类似display: none），该元素仍是普通input，比如<input type="text" hidden name="x">依然会响应focus()、触发input事件，且若 JS 移除hidden，它立刻变成可编辑文本框 - 两者不能混用：
<input type="hidden" hidden>语法合法但冗余，hidden对type="hidden"无实际影响
需要动态控制隐藏/显示时怎么办
如果业务逻辑要求某个字段“有时隐藏、有时显示”（比如条件表单），就不能固定用 type="hidden" ——因为它永远不显示。此时应：
- 用
type="text"（或其他合适类型）+hidden属性或 CSS 控制显隐 - 切换时同步修改
name：隐藏时设为空字符串（el.name = ""），确保不提交；显示时恢复原name - 避免只靠 CSS 隐藏却保留
name，否则值仍会提交，造成后端困惑 - 若用
display: none，务必加tabindex="-1"防止键盘聚焦
真正需要“隐藏但提交”的场景，type="hidden" 是唯一干净解法；所谓“动态隐藏”，本质是字段存在性切换，不是样式切换。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
