最安全标准的隐藏方式是type="hidden"，它语义正确、兼容性好、不渲染但参与表单提交；css隐藏或data-*属性均不可替代，hidden全局属性也不等同于type="hidden"。
用 type="hidden" 是最安全、最标准的隐藏方式
HTML5 并没有新增隐藏表单域的机制，<input type="hidden"> 仍是唯一语义正确、浏览器兼容性完备、且能随表单正常提交的方案。它不渲染 UI，但保留在 DOM 中，值会参与 form.submit() 或原生表单提交。
常见错误是试图用 CSS 隐藏 type="text" 或 type="number"：这会导致可访问性问题（屏幕阅读器可能仍读出）、DOM 操作易误触、且部分浏览器在表单重置时行为不一致。
<input type="hidden" name="user_id" value="12345">
display: none 或 visibility: hidden 不能替代 type="hidden"
视觉隐藏 ≠ 表单域隐藏。CSS 隐藏的 <input> 依然会提交数据，但带来三类风险：
- 用户可通过 DevTools 修改其
value，且无任何校验提示 - 当表单含多个同名字段时，CSS 隐藏的字段仍参与值收集，可能覆盖或叠加预期值
- 某些旧版 iOS Safari 在软键盘弹出后，会意外重置
display: none的 input 值为初始空字符串
若必须动态控制显示/隐藏逻辑，应配合 JavaScript 切换 disabled 属性，而非仅靠 CSS：
立即学习“前端免费学习笔记（深入）”；
<input type="text" name="temp_token" disabled>
<script>
document.querySelector('input[name="temp_token"]').disabled = true;
</script>
不要用 data- 属性存需要提交的表单值
data-* 属性只用于存储自定义元数据，不会被浏览器自动包含在表单序列化结果中（new FormData(form)、form.serialize()、原生提交均忽略它们）。试图这样写：
<form id="myForm"> <input data-user-id="67890"> </form>
会导致后端永远收不到 user_id。正确做法是补一个真正的 type="hidden" 字段：
<form id="myForm"> <input type="hidden" name="user_id" value="67890"> </form>
注意 hidden 全局属性和 type="hidden" 的根本区别
hidden 是 HTML5 全局布尔属性，作用是让元素不渲染（类似 display: none），但它**不改变表单行为**——一个 <input type="text" hidden> 依然会提交值，只是看不见。而 type="hidden" 是专门设计的表单控件类型，语义上就表示“该值需提交但无需用户交互”。
所以这两者不能混用：
-
<input type="hidden" hidden>：冗余，hidden属性无效（type="hidden"本就不渲染） -
<input type="text" hidden name="foo" value="bar">：危险，它可见性被隐藏，但仍是普通文本输入框，用户可通过 JS 修改、焦点可达、且可能被自动填充工具注入
真正要隐藏并提交的字段，只用 type="hidden"；真要临时移出渲染流又保留交互能力（比如折叠面板里的字段），用 hidden 属性 + 显式管理 disabled 和提交逻辑。
