必须用input type="hidden"时：当后端逻辑依赖orderid、editid等不可见不可编辑的上下文值，删掉会导致报错或逻辑断裂；如多步骤表单传参、编辑页指定记录id、csrf token携带等场景。
什么时候必须用 input type="hidden" 而不是删掉字段
当后端逻辑依赖某个值（比如 orderId、editId、step）但用户不该编辑、也不该看到它时，删掉字段会导致后端收不到必要上下文，直接报错或逻辑断裂。
- 多步骤表单中，
form2.php需要把$_POST["userId"]传给form3.php，不靠input type="hidden"就得重查数据库或依赖session，增加耦合 - 编辑页面加载时从数据库读出
id=105，提交时必须带这个 ID，否则后端不知道要更新哪条记录 - CSRF token 必须随每个表单提交，但不能让用户输入或感知，
input type="hidden"是标准承载方式
name 和 value 哪个更容易出错
name 错了，后端根本收不到；value 错了，后端收到的是脏数据——两者都致命，但 name 更常被忽略。
- 拼写不一致：前端写
name="prod_id"，后端却按$_POST["productId"]取值 → 返回undefined或空字符串 - 未动态赋值：静态写死
value="123"，但实际需要 JS 注入 token 或从 URL 参数读取 → 提交时值为空或过期 - 多个同名字段：页面里不小心写了两个
name="token"，浏览器只提交最后一个，后端校验失败
为什么不能把敏感数据塞进 input type="hidden"
因为用户打开 DevTools（F12），两秒就能找到并改掉 value——它只是“视觉隐藏”，不是“逻辑隔离”。
- 金额字段写成
<input type="hidden" name="price" value="99.9">？攻击者可改成0.1直接提交 - 权限字段如
<input type="hidden" name="role" value="user">？能轻易篡改为"admin" - 真正该做的：只传不可伪造的标识（如数据库主键、JWT payload 中已签名的 ID），所有敏感判断和校验必须在服务器端重做
JS 动态写入 input type="hidden" 最常踩的坑
DOM 没就绪就操作、选错元素、没处理异步延迟——这些都会导致提交时 value 为空。
- 脚本放在
里，但document.getElementById("token")找不到元素 → 加DOMContentLoaded或把<script></script>放在底部 - 用
getElementsByName("csrf")却忘了它返回NodeList，直接.value会报错 → 改用querySelector('input[name="csrf"]') - token 从 API 异步获取，但表单提交按钮没等
Promise resolve就被点了 → 提交时value为空
name 当作 DOM ID 用，或者以为只要页面上有这个元素，后端就一定能拿到值。其实只要 name 缺失、拼错、或 JS 更新逻辑被绕过，整个链路就断了。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
