form属性必须严格匹配目标form的id,仅对submit类按钮生效,提交时只收集目标form内可提交控件的数据,且按钮不可嵌套在任何form中。

form 属性必须指向真实存在的 form#id
按钮能跨表单提交,前提是它的 form 属性值必须严格匹配页面中某个 <form></form> 元素的 id。浏览器只认 id,不支持 name、class 或 CSS 选择器。
常见静默失败:写成 form="user-form",但目标 <form></form> 缺少 id="user-form",或拼写大小写不一致(如 id="UserForm")、多了空格或连字符。此时点击无反应,控制台也不报错。
- 确保目标
<form id="target-id"></form>存在且拼写完全一致 - 按钮本身不能嵌套在任何
<form></form>内部——否则form属性被忽略 - 只对
<button type="submit"></button>、<input type="submit">、<input type="image">生效;type="button"不会触发提交
提交时只采集目标 form 内的控件值
哪怕按钮放在页脚、弹窗甚至另一个表单内部,只要 form="target-id" 有效,提交时收集的数据**仅来自 id="target-id" 的 <form></form> 内部所有可提交控件**(<input>、<select></select>、<textarea></textarea> 等),完全无视按钮物理位置。
-
disabled的控件不会被包含在提交数据中 - 按钮自身的
name和value默认不随表单提交(除非显式设置formenctype和formmethod并触发 submit) - 若需区分多个提交入口(如“保存”和“发布”),可用
formaction和formmethod覆盖目标<form></form>的对应属性
JavaScript 触发时 event.submitter 指向准确
用 JS 调用 button.click() 同样触发该关联行为,且监听目标 <form></form> 的 submit 事件时,event.submitter 会准确指向这个带 form 属性的按钮(前提是它为 type="submit")。
立即学习“前端免费学习笔记(深入)”;
但注意:event.submitter 在 Safari 15.4 之前不支持,旧版需靠 data-* 属性 + click 事件手动标记。
- 不要依赖
form.submit()方法来模拟——它不会设置event.submitter,值为null - 如果按钮在模态框里,确保模态框 DOM 插入时机早于事件绑定,否则可能找不到目标
form
fieldset 的 form 属性是另一条路
除了按钮的 form 属性,<fieldset></fieldset> 也支持 form 属性,可用于将物理上分散的控件逻辑归属到同一表单。
比如高级设置面板里的 <input> 可以放在独立 <fieldset form="main-form"></fieldset> 中,它们就会和主表单一起提交,无需 JS 拼接数据。
-
<fieldset form="xxx"></fieldset>中的控件必须有name才会被提交 - 它不改变控件渲染位置,只改变提交归属,适合模块化组件封装
- 与按钮的
form属性互不冲突,可组合使用(例如:侧边栏字段用fieldset归属,底部按钮用form提交)



















