name属性决定后端接收字段名，必须正确拼写且不缺失；type="hidden"须严格小写；value需存在且及时赋值；hidden字段不可用于敏感数据，服务端须二次校验。
name 属性漏写或拼错，后端根本收不到字段
浏览器只认 name 属性来决定提交键名，没它等于没这个字段。PHP 读 $_POST['user_id']，Flask 读 request.form.get("user_id")，键名完全取决于前端写的 name 值。
- ✅ 正确：
<input type="hidden" name="user_id" value="123"> - ❌ 错误：
<input type="hidden" value="123">（缺name，不提交） - ❌ 错误：
<input type="hidden" name="userId" value="123">（前后端命名不一致，后端取不到）
多个同名 name 会全部提交：PHP 自动转为数组，Flask 默认只取第一个 —— 要么避免重复，要么明确约定接收方式（如 name="tag[]" 或后端用 request.form.getlist()）。
value 为空、未赋值或 JS 更新太晚，提交就是空字符串或不提交
value 属性必须存在；写成 value="" 会提交空字符串，但完全不写 value 属性则该字段压根不参与提交。
- 静态值直接写死：
<input type="hidden" name="csrf_token" value="a1b2c3"> - JS 动态赋值必须在
submit事件触发前完成，推荐绑定到form.onsubmit开头：
form.addEventListener('submit', function(e) {
document.querySelector('input[name="timestamp"]').value = Date.now();
});
别把脚本放在 <head> 里就直接操作 DOM —— 元素可能还没加载；用 DOMContentLoaded 或把 <script> 放在 </body> 前。
立即学习“前端免费学习笔记（深入）”；
框架项目（Vue/React）别直接改 value，走响应式绑定：v-model 或 value={this.state.id} + onChange。
type="hidden" 写错大小写或拼成 "hide"，字段就变成可见文本框
浏览器严格区分大小写，且只识别 type="hidden" 这个字面量。写成 type="HIDDEN"、type="hide" 或漏掉 type，都会降级为 type="text"，导致字段意外显示或被用户清空。
- ✅ 正确：
<input type="hidden" name="step" value="2"> - ❌ 错误：
<input type="Hide" name="step" value="2">（降级为 text） - ❌ 错误：
<input name="step" value="2">（无type，默认 text）
别用 display: none 或 visibility: hidden 替代 —— 那只是视觉隐藏，type="text" 仍可被修改、校验、甚至意外暴露。
把价格、权限、角色塞进 hidden 字段，等于给攻击者递刀
<input type="hidden"> 的值在 DevTools 里两秒就能改，它不是安全机制，只是传输载体。服务端必须对所有 hidden 字段做二次验证。
- 合理用法：
<input type="hidden" name="page_id" value="123">（传递当前页面标识，用于日志或分页） - 危险用法：
<input type="hidden" name="user_role" value="admin">（角色必须由后端鉴权决定） - JS 动态更新时注意时序：如果监听
change更新 hidden，但用户跳过选择直接点提交，就会提交空值 —— 推荐统一在submit事件开头做 final write
复杂数据（如对象）需 JSON.stringify() 后再塞进 value，且注意特殊字符是否需 encodeURIComponent() 编码，否则后端解析会失败。
