隐藏字段应使用而非style="display:none"或hidden属性，因其语义明确、行为一致、可访问性好；name必设，value须由服务端注入，不可用于安全校验。
用 <input type="hidden"> 添加不可见的表单数据
隐藏字段本质就是不渲染在页面上、但会随表单一起提交的 <input> 元素。最直接的方式就是写 <input type="hidden" name="token" value="abc123">。浏览器不会显示它，但用户提交表单时，name 和 value 会作为键值对发给后端。
常见错误是误用 style="display:none" 或 hidden 属性来“隐藏”普通输入框——这会导致元素仍参与表单序列化（比如 <input type="text" hidden>），但语义不清、可访问性差，且可能被某些旧浏览器忽略。必须用 type="hidden" 才能保证行为一致。
隐藏字段的典型使用场景和注意事项
它常用于传递服务端生成的防重放令牌、当前页面 ID、用户身份标识（如 session_id）、来源页标记等。这些值不该让用户修改，也不该暴露在 DOM 可编辑区域里。
-
name必须设置，否则不会出现在提交数据中 -
value应由服务端动态注入，避免硬编码敏感值（比如把数据库主键直接写死在 HTML 里） - 多个隐藏字段可以共存，顺序不影响提交顺序，但建议按逻辑分组排列便于维护
- 不要依赖隐藏字段做安全校验——前端传来的任何数据都可能被篡改，后端必须重新验证
与 <input type="text" hidden> 的区别
虽然两者视觉效果相似，但语义和行为不同：type="hidden" 是专为传输元数据设计的，不占用表单 tab 键导航顺序，不触发 focus/blur 事件，也不会被屏幕阅读器朗读；而 hidden 是通用可见性控制属性，仅影响渲染，仍保留输入控件的所有交互特性。
例如，下面这段代码看似等效，实则风险不同：
<input type="hidden" name="action" value="update"><input type="text" name="action" value="update" hidden>
后者如果被 JS 动态修改了 value，或用户通过开发者工具删掉 hidden，就变成一个可编辑文本框；前者无论如何操作，都不会出现在界面上，也更难被意外覆盖。
配合 JavaScript 动态更新隐藏字段值
有时需要根据用户操作实时更新隐藏字段，比如记录选中的商品 ID、当前时间戳、或表单校验状态。这时要确保只修改 value，不要改动 type 或移除元素本身。
示例：
document.querySelector('input[name="timestamp"]').value = Date.now();
注意点：
- 务必用
querySelector精准定位，避免多个同名隐藏字段时出错 - 若通过 AJAX 获取新值，应在请求成功回调里更新，而不是在发送前硬写死
- 不要用
innerHTML或outerHTML替换整个节点——容易丢失事件绑定或破坏表单结构
隐藏字段真正起作用的地方不在前端渲染，而在表单提交那一刻的数据完整性。别把它当成“藏东西”的地方，而是当作前后端约定好的、轻量级的上下文传递通道。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
