hidden input 的基本写法是 <input type="hidden" name="xxx" value="yyy">，name 属性不可省略，否则后端收不到；常见错误包括漏写 name、type 拼错为 "hide"、input 未置于 form 内、误用 id 替代 name 或未转义用户输入导致 XSS。
hidden input 的基本写法和常见错误
直接用 <input type="hidden"> 就能创建隐藏字段，它不会在页面上渲染，但会随表单一起提交。最容易踩的坑是忘记设 name 属性——没有 name，后端根本收不到这个参数，浏览器会直接忽略该字段。
正确写法示例：
<input type="hidden" name="user_id" value="12345">
常见错误包括：
-
value为空字符串或未设置，导致后端收到空值（不是 null，而是空字符串） - 用
id替代name，误以为 id 能传参（实际不能） - 把 hidden input 放在
<form>外面，它不会被提交
动态设置 hidden input 的 value 值（JS 场景）
很多场景下 value 不是写死的，比如从 URL 参数、localStorage 或点击事件中取值。这时候必须确保 DOM 已加载完成再操作，否则 document.getElementById 找不到元素。
立即学习“前端免费学习笔记（深入）”；
推荐做法：
- 把 JS 放在
</body>前，或用DOMContentLoaded监听 - 用
document.querySelector('input[name="token"]')比getElementById更稳妥，避免 id 冲突 - 注意 XSS 风险：如果 value 来自用户输入或 URL，务必做 HTML 转义（如用
textContent赋值而非innerHTML）
示例（安全赋值）：
const tokenInput = document.querySelector('input[name="csrf_token"]');<br>if (tokenInput) {<br> tokenInput.value = encodeURIComponent(getTokenFromUrl()); // 避免特殊字符截断
hidden input 和其他传参方式的对比（query string / cookie / localStorage）
hidden input 只在表单提交时起作用，本质是 POST/GET 请求体的一部分。它和 query string、cookie、localStorage 的使用边界很清晰：
-
query string适合公开、无敏感性的参数，且长度受限（一般 2KB 左右），而 hidden input 在 POST 中可传更大值 -
cookie会自动携带在每次请求头中，有大小限制（4KB）和安全策略（HttpOnly），不适合临时、一次性的参数 -
localStorage不参与 HTTP 请求，必须靠 JS 主动读取并拼到请求里（如 fetch body），无法被传统表单提交捕获
所以，如果你用的是 <form method="post">，又不想让用户看到参数，type="hidden" 是最直接、兼容性最好、无需额外 JS 的方案。
后端接收时要注意的编码和类型问题
前端传过来的 hidden input 值，后端接收到的永远是字符串。比如你写了 value="true"，PHP 的 $_POST['flag'] 是字符串 "true"，不是布尔值；Python Flask 的 request.form['count'] 是字符串 "42"，不是整数。
容易忽略的点：
- 空格会被保留：若前端 value 是
" 123 "，后端收到的就是带前后空格的字符串，建议统一 trim - 中文或特殊符号需确认前后端字符编码一致（UTF-8 是底线，避免出现乱码或截断）
- 多个同名 hidden input（如循环生成）会以数组形式提交，但不同语言处理方式不同：PHP 默认合并为数组，Node.js 的
urlencoded中间件默认只取最后一个
复杂点在于：hidden input 看似简单，但它把「前端可控性」和「后端信任边界」暴露得很彻底——它完全由客户端生成，任何用户都能用 DevTools 修改 value。所以敏感参数（如权限标识、价格）绝不能只靠 hidden input 控制，必须后端二次校验。
