不能直接用fetch跨表单提交，必须通过form属性+submit事件联动，因为fetch不理解HTML表单语义，无法自动处理disabled字段、文件控件、原生校验等。
不能直接用 fetch 跨表单提交——必须靠 form 属性 + submit 事件联动，否则数据采集范围不可控。
为什么不能手动收集多个表单字段再 fetch？
跨表单提交的本质不是“发数据”，而是“让浏览器知道该从哪几个 <form></form> 里取值”。fetch 是纯 JS 请求，它不理解 HTML 表单的语义边界，也不会自动过滤 disabled、忽略 type="file" 未选中项、或复用 required 验证逻辑。
常见错误包括：
- 手动
querySelectorAll("input, select, textarea")拿到所有字段，结果把其他无关表单甚至弹窗里的输入框也塞进去了 - 用
FormData时传入错误的form元素引用，导致只采集了部分字段 - 没调
form.checkValidity()，绕过 HTML5 原生校验，用户点了就发空数据
form 属性如何精准绑定跨表单提交？
这是唯一被浏览器原生支持的跨表单提交机制，不需要 JS 收集字段，由渲染引擎自动完成数据聚合。
Convert Markdown To HTML And PDF - Markdown和HTML、PDF互转
下载
实现 Markdown↔ HTML 互转，支持导出 PDF，用于用户请求的文档格式转换。
立即学习“前端免费学习笔记（深入）”；
-
form属性值必须严格等于目标<form id="xxx"></form>的id，大小写、连字符、下划线都不能错 - 仅
<button type="submit"></button>或<input type="submit">支持该属性；type="button"写了也无效 - 按钮可以放在任意位置（页脚、侧边栏、另一个
<form></form>内部），只要form="target-id"存在且有效，提交时只采集id="target-id"表单内的可提交控件 - 目标表单中
disabled的控件不会被包含，name为空或重复的字段会被浏览器静默丢弃
如何用 JavaScript 监听并接管跨表单提交？
监听目标 <form></form> 的 submit 事件，而非按钮的 click —— 这样才能拿到完整、标准化的提交上下文。
- 事件对象的
event.submitter会准确指向触发提交的那个带form属性的按钮（前提是它是type="submit"） - 在事件处理器中必须调用
event.preventDefault()，否则仍会走传统跳转或下载流程 - 用
new FormData(event.target)获取数据，它自动适配目标表单的enctype，含文件时无需手动设Content-Type - 若后端要求 JSON，先用
Object.fromEntries(new FormData(event.target))转对象，再JSON.stringify()，并显式设置headers: { "Content-Type": "application/json" }
容易被忽略的兼容性与调试点
event.submitter 在 Safari 15.4 之前不支持，旧版 Android WebView 可能完全忽略 form 属性。遇到静默失败时，优先检查：
- 控制台是否报错？不报错 ≠ 成功：静默失败最常见原因是
form="xxx"对应的<form id="xxx"></form>根本不存在或拼写不一致 - 网络面板里有没有发出请求？没有说明提交行为根本没触发，问题出在 HTML 结构或按钮类型上
- 有请求但数据不对？打开响应体，看是不是
FormData被当字符串发出去了（常见于忘记new FormData(form)直接传 form 元素） - 含文件上传却收不到？确认没手动设置
Content-Type，且后端能处理multipart/form-data边界解析
