必须包含 name 属性才能提交，否则后端收不到；正确写法为 ，name 决定后端键名，value 可静态或 js 动态设置，但需在提交前完成，且所有 hidden 字段均不可信，须服务端严格校验。

hidden 输入框怎么写才不会丢数据

浏览器提交表单时，<input type="hidden"> 的值必须有 name 属性，否则后端收不到。常见错误是只写了 value，漏掉 name，导致参数根本不上报。

正确写法示例：

<input type="hidden" name="user_id" value="12345">

• name 是关键，它决定后端接收到的键名（如 PHP 的 $_POST['user_id']，Python Flask 的 request.form.get('user_id')）
• value 可以是静态字符串，也可以用 JS 动态赋值，但赋值必须在表单提交前完成
• 多个 hidden 字段可以共存，只要 name 不重复（或按需用数组命名，如 name="tags[]"）

JS 修改 hidden 值后为什么后端还是旧值

典型原因是修改时机不对：DOM 渲染完成但事件绑定晚了，或者修改发生在表单提交之后（比如放在 submit 事件处理函数末尾，却忘了 return false 或调用 event.preventDefault()）。

• 推荐在 submit 事件开头更新：

  form.addEventListener('submit', function(e) {<br>  document.querySelector('[name="timestamp"]').value = Date.now();<br>});

• 避免用 onclick 绑定按钮再手动 submit()，容易绕过你的 JS 更新逻辑
• 检查是否用了框架（如 Vue/React），直接操作 DOM 可能被响应式系统覆盖，应优先走数据绑定

hidden 字段有没有安全风险

有。它只是“对用户不可见”，不是“不可见/不可改”——任何人均可通过开发者工具随时编辑 value。它只适合传非敏感、可校验的上下文数据。

• 不要放密码、token、权限标识、价格金额等可被篡改后导致越权或资损的信息
• 适合场景：页面来源标记（ref=dashboard）、临时会话 ID、已验证的用户昵称（仅作展示）、防重放时间戳（配合后端签名校验）
• 后端必须校验 hidden 值的合法性，不能无条件信任。例如 status 字段，应检查是否属于预设枚举值，而非直接入库

和 sessionStorage / localStorage 比有什么区别

核心区别在于生命周期和传输机制：<input type="hidden"> 是一次性的 HTTP 请求载荷；而 storage 是持久化在浏览器端的键值对，不自动参与表单提交。

• 需要跨页面传递且不希望暴露给用户 → 用 sessionStorage + JS 注入到 hidden 字段中
• 需要服务端强制感知 → 必须走 hidden（或 URL 参数、请求头），storage 服务端根本看不到
• hidden 字段过多会影响 HTML 体积，特别是长文本或 Base64 数据，建议压缩或换用 AJAX 提交

实际项目里最容易忽略的是后端校验环节——很多人把 hidden 当成“内部字段”就放松了输入检查，结果成了逻辑漏洞入口。