在网页表单开发中，经常需要传递一些用户不需要感知的业务参数，比如用户身份标识、操作来源标记、关联订单编号等，这类参数不需要在页面展示，也不能被用户随意修改。通过HTML的input标签的隐藏类型，可以很方便地实现这类参数的传递。
隐藏input的基本用法
HTML的input标签有一个type属性，当设置值为hidden时，这个输入框就不会在页面上显示，但是它的name和value属性会被正常提交到后端。
基础的使用示例如下：
<form action="/submit_order" method="post">
<!-- 用户可见的表单字段 -->
<label>收货地址：<input type="text" name="address"></label><br/>
<label>联系电话：<input type="text" name="phone"></label><br/>
<!-- 不可见的业务参数 -->
<input type="hidden" name="user_id" value="10086">
<input type="hidden" name="order_type" value="normal">
<input type="hidden" name="source" value="mobile">
<input type="submit" value="提交订单">
</form>
上面的代码中，三个type="hidden"的input标签不会在页面上显示，但是当用户提交表单时，这三个字段的name和对应的value会和用户填写的地址、电话一起被提交到/submit_order接口。
适用场景说明
隐藏input适合传递以下类型的业务参数：
- 用户身份相关的固定参数，比如用户ID，不需要用户填写，也不能随意修改
- 操作类型标记，比如区分是新增操作还是编辑操作，后端需要根据这个参数走不同的逻辑
- 关联的关联数据ID，比如编辑文章时传递的文章ID，提交评论时传递的文章ID
- 来源标记，比如标记表单是从哪个页面跳转过来的，方便后端做数据统计或者跳转逻辑
需要注意的问题
安全问题
隐藏input只是不在页面显示，用户仍然可以通过浏览器的开发者工具修改它的value值，所以不能把需要严格校验的敏感参数只放在隐藏input中。比如涉及金额、权限相关的参数，后端必须做二次校验，不能信任前端传递过来的值。
动态赋值场景
很多时候隐藏input的value不是固定的，需要根据页面逻辑动态设置，这时候可以通过JavaScript来修改：
// 页面加载完成后，根据后端返回的数据设置隐藏input的值
window.onload = function() {
// 假设从接口获取到了用户ID
var userId = 10086;
// 获取隐藏的user_id输入框
var userIdInput = document.querySelector('input[name="user_id"]');
// 设置value值
userIdInput.value = userId;
// 也可以动态创建隐藏input并添加到表单中
var form = document.querySelector('form');
var hiddenInput = document.createElement('input');
hiddenInput.type = 'hidden';
hiddenInput.name = 'timestamp';
hiddenInput.value = new Date().getTime();
form.appendChild(hiddenInput);
};
多表单复用参数
如果同一个页面有多个表单需要传递相同的隐藏参数，不需要每个表单都写一遍，可以通过JavaScript统一设置，或者在页面加载完成后遍历所有表单添加对应的隐藏input。
与其他传递方式的对比
除了隐藏input，还有其他方式可以传递不可见的参数，比如URL参数、Cookie、LocalStorage等，不同方式的适用场景不同：
| 传递方式 | 优点 | 缺点 | 适用场景 |
|---|---|---|---|
| 隐藏input | 随表单一起提交，使用简单，不需要额外处理 | 只能用于表单提交，用户可修改 | 表单提交时的固定业务参数 |
| URL参数 | 适用于GET请求，跳转时携带方便 | 会暴露在地址栏，长度有限制 | 页面跳转时的临时参数 |
| Cookie | 可以跨页面携带，不需要每次手动设置 | 有大小限制，每次请求都会携带，安全性较低 | 用户身份标识等全局参数 |
实际开发中可以根据具体需求选择合适的参数传递方式，隐藏input是最适合表单提交场景下的不可见业务参数传递方案。
HTMLinput表单hidden_input修改时间：2026-06-19 17:30:16