隐藏表单域需显式声明name和value属性才能被提交，type必须严格为"hidden"，且必须位于form标签内、不可disabled；其值仅作上下文传递，关键数据仍须后端校验。
隐藏表单域不是“藏起来就安全了”，而是让前端原样传递服务端已确认的上下文数据——用对了省事，写错一个属性后端就收不到。
为什么 name 和 value 都必须显式写出
浏览器只靠 name 识别字段名，没它等于没这个参数；value 不写则整个字段不参与提交，哪怕 DOM 里存在。PHP 读 $_POST['order_id']、Flask 读 request.form.get("order_id")，全依赖前端写的 name 值是否完全一致。
- ✅ 正确：
<input type="hidden" name="order_id" value="ORD-20260805-123"> - ❌ 错误：
<input type="hidden" value="ORD-20260805-123">（缺name，后端收不到） - ❌ 错误：
<input type="hidden" name="orderId" value="...">（大小写或驼峰不匹配，后端取不到） - ⚠️ 注意：多个同名
name会全部提交，PHP 自动转数组，Flask 默认只取第一个
type="hidden" 写错大小写或拼写就变文本框
浏览器严格匹配字面量 "hidden"。写成 type="HIDDEN"、type="hide" 或漏掉 type，都会降级为普通文本框——用户能看见、能编辑、能清空，甚至可能被样式意外显示出来。
- ✅ 正确：
<input type="hidden" name="csrf_token" value="a1b2c3"> - ❌ 错误：
<input type="Hide" name="csrf_token" value="..."> - ❌ 错误：
<input name="csrf_token" value="...">（无type，默认text） - ⚠️ 别用
display: none或visibility: hidden包裹type="text"——视觉隐藏 ≠ 表单隐藏，DOM 仍在，值仍可被改
动态更新 value 必须在 submit 事件开头执行
靠 click 或 change 事件更新 hidden 字段容易遗漏：用户直接点提交按钮，JS 没触发，字段还是空的。推荐统一在表单提交前做最终同步。
- ✅ 推荐写法：
form.addEventListener('submit', () => { document.querySelector('input[name="timestamp"]').value = Date.now(); }); - ❌ 危险写法：把赋值逻辑放在
DOMContentLoaded里，但用户操作后值已过期 - ⚠️ 若用
document.getElementById()，确保 ID 唯一；更稳妥的是用form.querySelector('[name="xxx"]')，避免跨表单污染 - ⚠️
value含中文、邮箱、JSON 等特殊字符时，先encodeURIComponent(JSON.stringify(obj))，后端对应解码
为什么它不能放 form 外面、也不能加 disabled
input 必须在 <form></form> 标签内部才参与原生提交；加了 disabled 属性，哪怕看不见，也不会发出去——这是浏览器规范，不是 bug。
- ✅ 正确结构：
<form> <input type="hidden" name="source" value="search"><button type="submit">提交</button> </form> - ❌ 错误：
<div><input type="hidden" ...></div> <form>...</form>（不在 form 内） - ❌ 错误：
<input type="hidden" disabled name="step" value="2">（disabled 后不提交） - ? 调试技巧：打开开发者工具 → Network → 找到对应请求 → 看 Form Data 面板，确认字段是否真实出现
真正该保护的数据——价格、权限、角色——永远不该塞进 hidden 字段。它只是信封，不是保险柜；信封里的内容是否可信，得由后端校验签名、查库、比对 session，而不是看前端传了什么。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
