type="hidden"用于隐藏表单字段但保留提交能力，hidden属性用于隐藏整组元素，disabled仅禁用交互且不提交值，CSS隐藏易引发验证与焦点问题。
用 type="hidden" 隐藏表单字段但保留提交能力
如果目标是让某个字段「不显示、不交互、但值必须随表单一起发到服务器」，type="hidden" 是唯一符合语义且被浏览器规范保障的行为。它不是视觉隐藏，而是逻辑上作为表单数据载体存在。
常见错误是误用 display: none 或 visibility: hidden 包裹普通 <input type="text"> —— 这类元素仍会提交，但失去表单语义，且可能被屏幕阅读器误读；更糟的是，若配合 JS 动态控制，容易因 DOM 更新时机导致 value 未同步。
-
<input type="hidden" name="user_id" value="12345">是标准写法，无需额外样式或脚本 - 多个同名
type="hidden"会被后端解析为数组（如 PHP 的$_POST['tag']是数组），注意服务端接收逻辑 - 不要把敏感信息（如 token、密码）放在这里——用户可通过 DevTools 查看并篡改
value - 若需动态赋值，直接操作
element.value = 'new-value'即可，无需触发事件
用 hidden 属性隐藏整行或整块表单区域
当需要隐藏的不是单个字段，而是一组关联元素（比如某一行 <tr>、某个 <fieldset>），用布尔属性 hidden 最简洁。它等效于 style="display: none"，但语义明确、支持无障碍访问，且不会被 CSS 规则意外覆盖。
典型场景：CMS 输出的只读表格中，某列含敏感字段（如 Password），但你无法修改 HTML 结构，只能在 <td> 内插入脚本。
立即学习“前端免费学习笔记（深入）”；
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
- 直接写
<tr hidden>或<fieldset hidden>，浏览器立即生效 - 动态控制时用
element.hidden = true（设为false可恢复），比切换 class 更轻量 - 注意：IE 不支持
hidden属性，若需兼容，得回退到style.display = 'none' - 不要混用
hidden和disabled—— 前者影响渲染，后者影响交互与提交
用 disabled 禁用输入框但不隐藏它
如果元素要可见、可读、不可编辑，且其值仍需提交（比如展示用户已填的订单号），disabled 是正确选择。它和隐藏无关，但常被误当作“隐藏手段”来用。
关键区别在于：被 disabled 的 <input>、<select>、<textarea> 的值根本不会出现在 POST 数据里 —— 这是 HTML 规范强制行为，不是浏览器 bug。
- 写法就是
<input type="text" disabled value="ABC123">，不用加=true - 若需提交该值，必须额外加一个
type="hidden"字段，值与 disabled 元素一致 - JS 控制时用
input.disabled = true，不要用setAttribute('disabled', 'disabled')—— 后者在某些旧版 Safari 中有兼容问题 -
readonly才是“可见+可提交+不可编辑”的组合，适用于展示型字段
避免用 CSS 隐藏表单元素的三个坑
用 display: none 或 visibility: hidden 隐藏 <input> 等表单控件，表面看有效，实则埋下隐患。
最常踩的坑是：表单验证失败时，被 CSS 隐藏的字段报错位置不可见，用户无法定位问题；或者 JS 拿不到它的尺寸/焦点状态，导致自动滚动、校验逻辑异常。
-
display: none的元素完全脱离渲染流，getBoundingClientRect()返回全零，focus()失败 -
visibility: hidden虽保留占位，但offsetHeight仍为 0，且键盘 tab 无法聚焦 - 若用
opacity: 0+pointer-events: none，元素仍在 tab 顺序中，可能造成焦点陷阱 - 真正需要“视觉隐藏但语义保留”时，应使用
aria-hidden="true"配合sr-only类，而非单纯 CSS
type="hidden" 和 hidden 属性覆盖了绝大多数“隐藏表单元素”的需求。复杂交互（比如条件显示/隐藏整块表单）建议用 JS 控制 hidden 属性或切换 class，而不是靠 CSS 把控渲染逻辑——前者语义清晰、可预测，后者容易失控。 
