HTML hidden 隐藏输入：提交值、JavaScript 修改与安全边界

HTML 参考手册

创建时间 2026-10-30 最后修改 2026-10-30

input type="hidden" 在表单中包含一个名称和值，但不显示输入框。name 是提交的字段名称，value 是其值。用户可以检查或更改它，因此不要用它来保护密码、权限、价格或其他敏感决策。

何时应使用隐藏输入？

使用它可以通过编辑表单发送目标帖子 ID，或将搜索条件带入下一次请求。它传递用户无需输入的值，同时服务器仍然负责决定这些值是否有效。

接收帖子 ID 并不授予编辑该帖子的权限。服务器必须通过经过身份验证的会话识别用户，并检查对帖子的访问权限。不要仅仅因为客户端在隐藏字段中发送了账户信息或客户端 IP 信息就信任它们。

类型	屏幕上的行为	表单数据
`type="hidden"`	没有输入界面，也不会接收焦点。	如果已命名且未被禁用，则包含。
`disabled`	禁用控件。	排除。
使用 CSS display: none 隐藏普通输入。	CSS 从布局中隐藏普通输入。	仅用 CSS 隐藏并不会将其从提交中排除。

id 可以在脚本中定位元素，但不会替换其提交的名称。没有名称的隐藏输入在普通表单提交中不会作为名称/值条目包含。即使添加 required 属性，隐藏输入也不会参与浏览器约束验证。

检查不可见的值是否已提交

将此完整代码保存为 hidden.html 并在浏览器中打开。无需服务器。提交时将显示使用 FormData 构建的名称/值条目，而不是发起网络请求。

<!doctype html>
<html lang="zh-CN">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>检查隐藏值</title>
  <style>
    body { margin: 24px; font-family: sans-serif; }
    label { display: block; margin: 12px 0; }
    pre { white-space: pre-wrap; overflow-wrap: anywhere; }
  </style>
</head>
<body>
  <h1>选择颜色</h1>
  <form id="demo">
    <label><input type="checkbox" name="color" value="blue" checked> 蓝色</label>
    <label><input type="checkbox" name="color" value="red"> 红色</label>
    <input type="hidden" id="size" name="size" value="big">
    <input type="hidden" name="excluded" value="not-sent" disabled>
    <button type="submit">查看提交值</button>
    <button type="button" id="change">将隐藏值改为small</button>
    <button type="button" id="restore">将隐藏值恢复为big</button>
  </form>
  <p id="status" aria-live="polite">初始隐藏值为big。</p>
  <pre id="result" aria-live="polite"></pre>
  <script>
    const form = document.querySelector('#demo');
    const size = document.querySelector('#size');
    const result = document.querySelector('#result');
    const status = document.querySelector('#status');
    form.addEventListener('submit', (event) => {
      event.preventDefault();
      result.textContent = JSON.stringify([...new FormData(form).entries()], null, 2);
    });
    function setSize(value) {
      size.value = value;
      status.textContent = `当前隐藏值：${value}。请再次查看提交值。`;
    }
    document.querySelector('#change').addEventListener('click', () => setSize('small'));
    document.querySelector('#restore').addEventListener('click', () => setSize('big'));
  </script>
</body>
</html>