form属性是跨表单提交草稿数据的唯一原生解法，需严格匹配目标表单id、设type="submit"并加formnovalidate跳过校验，提交仅包含目标表单内启用控件数据。
跨表单提交草稿数据，核心是让“保存草稿”按钮脱离当前编辑表单的物理位置，但又能准确采集目标表单字段——form 属性是唯一原生、零 JS 依赖的解法。
form 属性必须严格匹配目标表单 id
按钮用 form="edit-form" 指向表单，页面中就必须存在 <form id="edit-form"></form>。大小写、连字符、下划线全要一致。常见错误是拼错，比如写了 form="edit_form" 却配了 id="edit-form"，或漏掉 id 只写了 name —— 浏览器静默忽略，点击无反应，控制台也不报错。
实操建议：
- 用
document.getElementById("edit-form")在控制台手动验证 id 是否真实存在 - 避免动态生成 id 时引入空格或非法字符（如
id="my form"） - 多个草稿按钮可共用同一
form值，指向同一个编辑表单
按钮类型必须是 submit 或 image
form 属性只对 <button type="submit"></button>、<input type="submit"> 和 <input type="image"> 生效。type="button" 再怎么加 form 都不会触发提交。
立即学习“前端免费学习笔记（深入）”；
常见错误现象：按钮放在页脚或弹窗里，加了 form="edit-form" 却点不动——大概率是 type 没设或设成了 "button"。
实操建议：
- 显式写
<button type="submit" form="edit-form">保存草稿</button>，不依赖默认值 - 若用 UI 库封装的 Button（如 Ant Design），确认它透传了
type="submit"，否则form属性无效 - 按钮即使嵌套在另一个
<form></form>内，只要带form属性，就只提交目标表单数据，自身所在表单被完全无视
草稿提交必须绕过浏览器原生校验
编辑表单通常有 required、email 等约束，但草稿允许字段为空。仅靠 form 属性不够，必须配合 formnovalidate 才能跳过校验。
注意：formnovalidate 是布尔属性，只看是否存在，不要写成 formnovalidate="true"；且它只对 type="submit" 按钮生效。
实操建议：
- 草稿按钮写法：
<button type="submit" form="edit-form" formnovalidate>保存草稿</button> - 正式提交按钮不加
formnovalidate，保持原生校验拦截空字段 - 后端需通过隐藏字段（如
<input type="hidden" name="save_type" value="draft">）区分草稿/正式逻辑，不能只靠字段是否为空判断
提交数据范围只来自目标表单内部
按钮无论放在哪里（页头、弹窗、另一个表单内），只要 form="edit-form" 有效，提交时只会收集 <form id="edit-form"></form> 内所有启用的控件（input、select、textarea），disabled 的控件自动排除，按钮自身的 name/value 也不会附带过去。
容易被忽略的点：
- 目标表单里若有
<input name="q" value="xxx">，而草稿接口根本不需要q，它仍会被提交——form属性不做过滤，只能靠 JS 清空或后端白名单 - 如果草稿按钮和正式按钮都指向同一表单，但需要不同
action或method，可用formaction和formmethod分别覆盖，它们互不干扰 - 用 JS 调用
button.click()同样触发该行为，可用于程序化触发草稿保存
