<object> 标签不参与表单提交，无name语义、不可被FormData收集、不触发submit事件；需用隐藏字段+JS监听等方式显式桥接业务数据。
<object> 标签本身不参与表单数据提交，也不能被 form 元素自动收集值 —— 这是关键前提。它不是表单控件（如 <input>、<select>），没有 name 属性的语义化提交行为，也不触发 submit 事件监听。
为什么 <object> 无法直接关联表单提交
浏览器规范中，<object> 是嵌入外部资源（如 PDF、Flash、SVG、自定义插件）的容器，其内容运行在独立上下文里。即使它放在 <form> 内部，也不会被 form.elements 或 FormData 收集：
- 没有
value属性，也没有标准的“值获取”接口 - 不响应
formdata事件（HTML5 表单 API 中用于手动注入数据的事件） - 多数情况下无法通过 JavaScript 直接读取其内部状态（尤其跨域或二进制资源如 PDF）
如何让 <object> 的使用与表单逻辑协同
实际场景中，你可能想“记录用户查看了哪个文档”“提交当前嵌入的 SVG 配置”或“上传后预览并确认”。这时需绕过原生关联，用显式逻辑桥接：
- 用隐藏字段
<input type="hidden" name="doc_id">存储与<object>对应的业务标识（如文件 ID、URL hash、配置 key） - 若
<object>加载的是可交互 SVG，可通过内联<svg>替代（此时可用 JS 绑定事件并更新隐藏字段） - 对 PDF 预览，可监听
load事件后设置隐藏字段值：document.querySelector('object[data="report.pdf"]').addEventListener('load', () => { document.querySelector('input[name="previewed_doc"]').value = 'report.pdf'; });
替代方案：什么时候该换掉 <object>
如果目标是“让用户选择/上传/编辑后再提交”，<object> 往往不是最佳载体：
立即学习“前端免费学习笔记（深入）”；
- 需要用户上传文件？用
<input type="file">+ 后端返回预览 URL，再用<iframe>或<embed>渲染（更可控） - 要编辑内容？把 SVG 内联，或用 Canvas/WebGL 渲染器，状态由 JS 管理并同步到隐藏字段
- 依赖插件（如旧版 PDF 插件）？现代浏览器已弃用，且无法安全读取内部状态 —— 必须降级为服务端生成快照或提供文本摘要字段
真正难处理的点不在怎么“挂”上表单，而在怎么定义“这个 <object> 代表什么可提交的数据”。它的存在本身是被动展示，所有主动语义都得靠额外字段和脚本补全。
