应优先使用 type="hidden"，它语义正确、兼容性好、必参与表单提交；若用 display: none，须确保不加 disabled、不嵌套在 disabled fieldset 中、避免同名重复。
用 display: none 隐藏但确保提交有效
想藏一个 input 又让它照常提交数据，display: none 是最常用也最直接的方式。它让元素彻底不渲染、不占位，但只要没加 disabled，表单提交时仍会把它的 name 和 value 发出去。
常见错误包括：
- 顺手加了
disabled—— 一加就完全不提交，连name都消失 - 在
<fieldset disabled>里套着这个 input —— 同样被禁用，提交失效 - 多个同名 input（比如两个
name="token"），浏览器只提交最后一个，后端收不到预期值
推荐写法：<input type="text" name="next_step" value="confirm" style="display: none;">。别用 visibility: hidden，它虽然保留校验，但占位、可能干扰布局；也别用 opacity: 0，除非你真需要过渡动画且已配好 pointer-events: none。
type="hidden" 是语义化隐藏的首选
如果目标只是“传值不显形”，type="hidden" 比任何 CSS 隐藏都干净。它天生不可见、不可聚焦、不响应交互，且必参与表单序列化——连 IE8 都支持，兼容性无压力。
立即学习“前端免费学习笔记（深入）”；
关键点：
-
name必须存在且拼写准确，否则后端收不到字段；漏写name的<input type="hidden" value="123">直接被忽略 -
value可以静态写死，也可用 JS 动态赋值，但得等 DOM 就绪再操作，比如放在<script>块末尾或监听DOMContentLoaded - 不要指望
data-id或localStorage替代它——它们根本不进表单数据，后端永远收不到
示例：<input type="hidden" name="csrf_token" value="a1b2c3">。这是 CSRF token、数据库 ID、多步骤表单状态的标准承载方式。
JS 动态控制显隐时最容易漏掉的三件事
用 JS 切换 class 或直接改 style.display 很灵活，但也容易翻车：
- DOM 没加载完就执行 JS：比如
document.getElementById("user_id")放在<head>里，返回null，后续赋值静默失败 - 显隐切换后校验状态不刷新：一个
required的 input 从display: none切回可见，浏览器不会自动重跑checkValidity()，用户输错也不会提示 - 事件监听器失效：对 display: none 的元素绑定
input事件，根本不会触发；得先确保它 visible 再监听
稳妥做法：用 querySelector('input[name="action"]') 找元素（别用 getElementsByName 返回 NodeList 后直接链式调用 .value），显隐后手动调用 reportValidity()，并用 getComputedStyle(el).display !== "none" 判断真实状态。
iOS Safari 对隐藏 input 的特殊限制
在 iOS 15.4+ 的 Safari 中，某些隐藏方式会触发隐私策略降级：
-
input[type="file"]加了display: none后再用<label>模拟点击，部分版本会静默失败，没报错也没弹窗 - 带
autocomplete的字段被隐藏后，Safari 可能跳过自动填充逻辑，哪怕你本意只是临时隐藏
对策很明确：这类场景别硬藏 type="file"，改用 type="hidden" 存服务端生成的文件标识（如上传后的 UUID），UI 层用可见按钮 + JS 控制真实 file input 的 click 行为；autocomplete 属性在 Safari 里本就不可靠，不如去掉，靠后端校验兜底。
真正容易被忽略的是：隐藏不是目的，数据可靠抵达后端才是。CSS 隐藏是手段，type="hidden" 是契约——它不渲染、不交互、不妥协，但必须 name 对、value 准、时机稳。
