hidden input能传数据但不显示，因为浏览器渲染时跳过视觉绘制，但表单提交时仍将其name和value作为正常字段发送，name属性必须设置才能被后端接收。
hidden input 为什么能传数据但不显示
因为浏览器渲染时跳过视觉绘制，但表单提交时仍会把 name 和 value 当作正常字段发送。它不是“被禁用”，也不是“被忽略”，只是 DOM 中存在、CSS 不渲染、用户不可见。
常见错误现象：document.getElementById("myHidden").value 能取到值，但页面上找不到对应控件；后台收不到值，往往是因为 name 拼错、JS 动态赋值没执行、或表单提交前被 JS 清空。
-
name属性必须设置，否则不会参与表单提交 - 不要依赖
id来保证传输，name才是后端接收的键名 - 若用 JS 动态写入，确保在
form.submit()前已完成赋值 - 多个同名
hidden输入框，后端收到的是最后一个的值（部分框架可能合并为数组）
什么时候该用 hidden 而不是 sessionStorage 或 URL 参数
适用场景很明确：需要随表单一起提交、且不希望用户感知或篡改（尽管实际可被开发者工具修改）的上下文数据。比如分页跳转后的 page=3、编辑页的原始 id、CSRF token、来源标记 ref=dashboard。
对比其他方式：
-
sessionStorage：适合跨请求暂存，但需 JS 主动读取+赋值到表单，多一步易漏；关闭标签页即丢失 - URL 参数：暴露在地址栏，长度受限，不适合敏感或长文本；GET 提交才自然携带
-
hidden：零额外代码、天然集成表单、POST/GET 都生效，但值可被前端任意修改——仅用于防误，不用于防恶意
Node.js / PHP / Python 后端怎么拿到 hidden 字段
和普通表单字段完全一样，没有任何特殊处理。关键只看前端 name 是否匹配后端预期的键名。
示例：
<input type="hidden" name="user_role" value="editor">
对应后端获取方式：
- Node.js（Express）：
req.body.user_role（需body-parser或express.json({ extended: true })） - PHP：
$_POST['user_role']或$_REQUEST['user_role'] - Python（Flask）：
request.form.get('user_role')
容易踩的坑：method="get" 表单中 hidden 字段会拼进 URL 查询参数，但后端仍从 req.query（Node）、$_GET（PHP）、request.args（Flask）读取，不是 body。
hidden input 安全边界在哪
它不提供任何安全保护。用户打开 DevTools → Elements → 修改 value → 提交，后端就会收到伪造值。所以绝不能用它存权限标识、金额、状态开关等需校验的数据。
真正该做的：
- 所有关键字段，后端必须重新查库或验证逻辑一致性（比如用户想编辑 ID=123 的文章，hidden 里写了
id=123，后端仍要查SELECT * FROM posts WHERE id=123 AND author_id=?） - 敏感操作必须做服务端鉴权，hidden 只是传递“意图”，不是“授权”
- CSRF token 是 hidden 的合理用法，但必须配合服务端比对 session 中存储的 token 值
最常被忽略的一点：hidden 字段一旦写死在 HTML 里（如 <input type="hidden" name="source" value="app_v2">），就等于向所有人公开这个值——它不是秘密，只是上下文快照。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
