是原生隐藏字段，浏览器不渲染但提交时携带值；需设 name 和 value，必须在 内且不可 disabled，JS 赋值须及时且避免敏感信息前端伪造。
怎么用 <input type="hidden"> 添加隐藏字段
隐藏域不是靠 CSS 或 JS 隐藏的，而是原生语义：浏览器不渲染它，但提交时会带上值。最直接的方式就是写一个 <input> 标签，设 type="hidden"，再给 name 和 value。
常见错误是误用 display: none 或 visibility: hidden 包裹普通输入框——那样字段还在 DOM 里，但可能被某些表单库忽略，或在无障碍检测中被报出问题。
-
name必须有，否则提交时这个字段根本不会出现在请求体里 -
value可以为空字符串，但不能省略（否则部分老浏览器可能不提交） - 多个同名
name的 hidden 字段会被全部提交，后端收到的是数组（如 PHP 的$_POST['id']是数组）
示例：
<input type="hidden" name="csrf_token" value="a1b2c3">
隐藏域和 JavaScript 动态赋值要注意什么
用 JS 改 value 没问题，但得确保赋值发生在表单提交前，且别覆盖了服务端预设的关键值（比如防重放的 timestamp）。
立即学习“前端免费学习笔记（深入）”；
容易踩的坑：
- 在
DOMContentLoaded里赋值，但用户点提交太快，JS 还没跑完 → 值为空 - 用
document.querySelector('input[name="xxx"]').value = ...但页面里有多个同名 hidden → 只改第一个 - 把敏感信息（如用户 ID、权限等级）纯靠前端塞进 hidden，后端不校验 → 被篡改风险极高
建议：关键字段仍由服务端生成并输出；JS 只处理非敏感、临时性数据（如当前页码、筛选状态）。
为什么 <input type="hidden"> 提交失败或后端收不到
不是所有“看起来没显示”的字段都会提交。排查顺序很固定：
- 检查是否漏写了
name属性 —— 浏览器根本不认它为表单控件 - 确认该
<input>确实在<form></form>标签内部（不在表单外，也不在嵌套的<form></form>里） - 看浏览器开发者工具的 Network → Form Data，确认字段是否出现在提交载荷中
- 如果用了
form="form-id"外链方式，检查目标<form></form>的id是否拼写一致
注意：disabled 属性会让 hidden 字段失效（哪怕它是隐藏的），禁用状态下的任何表单控件都不会提交。
替代方案：用 <input type="hidden"> 还是其他方式
大多数场景下，<input type="hidden"> 就是最轻量、兼容性最好、语义最明确的选择。其他方式要么多余，要么有副作用：
- 用
<div style="display:none"><input></div>—— 多一层 DOM，无必要，还可能干扰样式或 JS 查询 - 用
data-属性存值再 JS 拼接 —— 提交逻辑变复杂，容易漏、错、乱序 - 用 session 或 cookie 传参 —— 不属于表单上下文，无法和本次提交绑定，且增加服务端状态管理负担
唯一需要考虑替代的情况是：字段值特别长（比如 Base64 图片），超出 GET 请求长度限制或引发 POST 性能抖动 —— 此时应走文件上传或分步接口，而不是硬塞 hidden。
