应使用 input type="hidden" 实现语义化隐藏且必提交，因其是浏览器原生支持的唯一可靠方案；display: none 的 input 仍参与校验、自动填充和序列化，易导致验证失败、脏数据或兼容性问题。
用 input type="hidden"，别用 CSS 隐藏 + 普通 input。 其他方式要么不提交、要么绕过验证、要么被自动填充干扰，只有 type="hidden" 是浏览器原生支持的“语义化隐藏且必提交”方案。
为什么 display: none 的 input 会出问题
它只是视觉消失，DOM 还在，浏览器照常校验、序列化、甚至触发 autocomplete。常见现象包括：
- 带
required属性却看不见报错，表单卡在客户端验证失败 - 用户刷新页面后，密码管理器把旧值填进已隐藏的
input[type="text"]，导致提交脏数据 - 移动端 Safari 可能静默忽略
accept或跳过自动填充逻辑 -
disabled一加就彻底不提交，readonly仍可见可聚焦
这些都不是“隐藏失败”，而是你误用了“视觉隐藏”去替代“语义隐藏”。
input type="hidden" 必须写对的三个字段
漏一个，后端就收不到——不是报错，是压根没这个键。
-
type="hidden"：必须小写、全拼，写成type="HIDDEN"或type="hide"会降级为 text 框 -
name：浏览器只认这个发键名，PHP 读$_POST['order_id']，Flask 读request.form.get("order_id")，前后端必须完全一致 -
value：必须显式存在，value=""会提交空字符串，不写value属性则整个字段不参与提交
错误示例：<input type="hidden" value="123">（缺 name）、<input name="token" value="abc">（缺 type）。
JS 动态赋值时 DOM 和时机都得卡准
值写晚了，提交就是空；选错元素，写到别的节点上；异步没等完，token 还没回来就点了提交。
- 脚本不能放在
里直接操作，要用DOMContentLoaded或把<script></script>放在前 - 别用
getElementsByName链式调用.value，它返回 NodeList，应改用querySelector('input[name="csrf"]') - CSRF token 等异步获取的值，要在
form.onsubmit开头强制写入，或加 loading 状态锁住按钮 - Vue/React 项目别直接 DOM 操作，走
v-model或value={this.state.id}+onChange
后端必须校验，前端传的任何 value 都不可信
input type="hidden" 不是保险柜，是信封——信封里装什么，得由发信人（后端）决定并核对。
- 不要把
user_role="admin"、price="999"、is_paid="true"硬编码进去 - 多步骤表单中传
step="2"合理，但后端要检查该用户是否真有权限走到这一步 - 同名多个
input会全部提交，PHP 自动转数组，Flask 默认只取第一个，需明确约定接收逻辑
最常被忽略的一点：隐藏域的 name 错了，后端连报错都收不到——它根本不会出现在请求体里，连日志都查不到痕迹。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
