type="hidden"是实现字段不显示但随表单提交的标准解法，它不渲染UI、不参与交互与验证，但值仍可被JS读写且提交至后端，严禁存放敏感信息。
用 type="hidden" 最直接，但别指望它“隐藏”语义
想让某个字段不显示、又随表单提交，type="hidden" 是标准解法。它不会渲染任何 UI，浏览器完全忽略其视觉呈现，但会照常参与序列化和提交。注意：它不是“隐藏逻辑”，只是“不画出来”——值依然在 DOM 里、可被 JS 读写、会被后端收到。
常见错误是把它当 display: none 用，以为能“隐藏敏感值”。其实只要打开开发者工具就能看到 value，所以绝不能放密码、token 等真正需要保密的内容。
-
<input type="hidden" name="csrf_token" value="abc123">—— 正确：用于防跨站请求伪造的令牌 - 不要写
<input type="hidden" name="user_password" value="xxx">—— 危险：前端明文暴露 - 如果字段需动态生成值，务必在提交前用 JS 赋值，否则可能提交旧值或空值
为什么不用 display: none 或 visibility: hidden 替代？
单纯用 CSS 隐藏 type="text" 或 type="number" 字段，会导致两个问题：一是表单验证仍会触发（比如 required 属性），二是部分老浏览器或辅助技术可能仍尝试聚焦或读取它。更关键的是，这种隐藏是“视觉欺骗”，字段依然参与约束检查、事件绑定和默认提交行为。
type="hidden" 则天生跳过所有交互逻辑：不响应点击、不触发 focus、不参与 form.checkValidity()，也不会被 tabindex 影响。
立即学习“前端免费学习笔记（深入）”；
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
-
type="hidden"不会触发input或change事件，哪怕 JS 修改了它的value -
display: none的普通 input 在 Chrome 中仍可能被键盘导航意外聚焦（尤其配合tabindex时） - 屏幕阅读器通常忽略
type="hidden"，但可能朗读display: none的元素（取决于 ARIA 属性和浏览器实现）
type="hidden" 的兼容性和性能几乎无坑
这个类型从 HTML2 就存在，所有浏览器都支持，连 IE6 都没问题。它不触发重排重绘，不占用布局空间，内存开销极小。唯一要注意的是：它没有默认样式，也不受 CSS appearance 或伪元素影响，所以无需额外重置。
如果你用框架（如 React、Vue），注意不要把 type="hidden" 和受控组件逻辑混用出错——比如 Vue 中 v-model 绑定到 hidden input 通常没意义，因为用户无法输入，JS 直接改 .value 更清晰。
- React 中推荐：
<input type="hidden" name="id" value="{itemId}">，避免用useState双向绑定 - 不要给
type="hidden"加required—— 浏览器会直接报错，该类型不支持该属性 - 服务器端必须校验 hidden 字段的合法性，前端传什么它就收什么，毫无可信度
替代方案只在特定场景下才值得考虑
真要“隐藏但保留交互能力”，比如临时禁用字段又不想删 DOM，用 disabled + display: none 组合更稳妥；如果字段要参与验证但不可见，得用 aria-hidden="true" + opacity: 0 + pointer-events: none，再手动处理焦点和验证逻辑——但这已经偏离“隐藏字段”的原始需求了。
记住：type="hidden" 解决的是“不显示 + 必须提交”的问题，不是“不可见 + 仍可操作”的问题。选错类型，后续调试成本远高于写对一行 type="hidden"。
最易忽略的一点：多个同名 type="hidden" 字段会全部提交，后端收到的是数组（如 PHP 的 $_POST['tag'] 是数组），而普通 input 同名只会取最后一个值。这点在动态生成字段时特别容易踩坑。
