HTML表单中添加隐藏域需用<input type="hidden">，必须设置name和value属性；name用于后端接收字段名，value为提交值，且标签必须置于<form>内部，动态赋值应在submit事件中处理。

HTML 表单里怎么加隐藏域

直接用 <input> 标签，type="hidden"，配上 name 和 value 就行。浏览器不渲染它，但提交表单时会把它的值一起发给后端。

必须设置的两个属性是 name 和 value

没设 name，后端收不到这个字段；没设 value，它就传个空字符串过去——多数时候这不是你想要的。

• name 要和后端约定好，比如 name="user_role" 或 name="csrf_token"
• value 可以是静态值（如 value="admin"），也可以用 JS 动态写入（比如从 localStorage 读一个 ID）
• 别用 id 替代 name：ID 只用于前端定位，不影响表单提交

常见错误：把 hidden input 放在 form 外面

如果 <input type="hidden"> 不在 <form> 标签内部，它根本不会随表单提交。哪怕视觉上看起来“挨着”，只要 DOM 结构不在 form 里，就无效。

Wechat HTML Publisher

直接上传HTML富文本到微信公众号草稿箱。支持完整的HTML格式,无需Markdown转换。

下载

正确写法示例：

<form action="/submit" method="post">
  <input type="text" name="username">
  <input type="hidden" name="source" value="dashboard">
  <button type="submit">提交</button>
</form>

动态设置 hidden input 的 value 时要注意时机

如果用 JavaScript 修改 value，确保在表单提交前完成。监听 submit 事件比放在页面加载时更稳妥，尤其当值依赖用户操作（比如选中某个 tab 后才确定要传什么）。

• 错误做法：页面一加载就写死 value，但之后用户行为会让这个值过期
• 推荐做法：form.addEventListener('submit', () => { document.getElementById('my-hidden').value = getCurrentState(); })
• 注意别重复绑定 submit 事件，否则可能多次覆盖或触发多次

有些项目会用多个 hidden 字段拼装上下文（比如 page_id、session_id、origin），这时候每个都得有唯一 name，且不能漏掉任何业务必需的字段——少一个，后端逻辑就可能判空失败。