应使用 type="hidden" 实现真正不可见但保留提交值；若复用可见元素，需设 disabled（不提交）或 readonly（提交但禁编辑），避免仅用 display: none 或 visibility: hidden。
怎么让 HTML 表单元素真正不可见又保留提交值
用 display: none 隐藏 <input> 或 <select></select> 后，它不会被表单提交——这是最常踩的坑。想“藏起来但还要传数据”，得区分清楚「隐藏」和「不可见但有效」。
-
display: none和visibility: hidden都会让元素不参与布局，但只有前者会让表单控件彻底被浏览器忽略（formdata里没有它，form.elements也查不到） - 真正要保留提交行为，该用
type="hidden"：它是语义正确的隐藏字段，不渲染 UI，但始终参与表单序列化 - 如果必须复用已有 visible 元素（比如临时禁用某个
<input type="text">），别只加样式，得同步设disabled或改type，否则用户仍可能通过 DevTools 改值并提交
disabled 和 readonly 对隐藏表单的影响差异
disabled 不等于隐藏，但它会阻止交互和提交；readonly 只禁输入，不阻止提交——这个区别在动态控制字段时特别关键。
-
disabled的元素：不出现在FormData中，form.submit()不包含它，JS 读element.value没问题但提交时被跳过 -
readonly的元素：正常提交，只是用户不能编辑；适合展示只读数据（如订单 ID），又需要后端接收 - 注意：
disabled元素的值在 JS 中仍可读写，但表单 API（如form.elements）会过滤掉它们；readonly则完全保留在表单流中
用 CSS 隐藏但保持表单功能的可行方案
真要视觉隐藏又不让表单丢值，position: absolute; left: -9999px 是比 display: none 更稳妥的 hack，但有可访问性代价。
- 绝对定位移出视口：元素仍在 DOM 中、可聚焦、可提交，屏幕阅读器可能仍会朗读（需配合
aria-hidden="true"） - 避免用
opacity: 0+pointer-events: none：透明但占位，用户无法操作，但表单仍提交——容易误以为“已禁用” - 移动端要注意：某些 iOS Safari 版本对
left: -9999px的 input 会触发键盘弹出异常，保险起见优先用type="hidden"
JavaScript 动态切换隐藏状态时的常见错误
用 JS 控制显示/隐藏时，最容易漏掉表单逻辑同步，导致提交结果和界面不一致。
- 不要只操作
style.display：隐藏后记得检查form.elements是否还包含该元素，或直接用FormData(form)打印验证 - 切换
type属性（如从text改成hidden）会重置元素状态，原value丢失，需手动备份再恢复 - 监听
input或change事件时，type="hidden"不触发这些事件，别指望它响应用户输入——它本就不该有输入
表单隐藏不是纯视觉问题，核心是「是否参与表单生命周期」。选错方式，轻则数据丢失，重则业务逻辑断裂。尤其在多步骤表单或条件字段里，一个 display: none 就可能让后端收不到关键参数。
立即学习“前端免费学习笔记（深入）”；
