fieldset 的 form 属性可将外部控件逻辑绑定至指定表单，但要求目标 form id 存在且唯一，否则静默失效；它支持批量委托、优先级低于控件自身 form 属性、不改变数据结构、不跨 shadow dom、需手动提取数据。
fieldset 的 form 属性能让你把物理上不在 <form></form> 标签内的控件，逻辑上绑定到指定表单——但必须确保目标 <form id="xxx"></form> 存在且 ID 唯一，否则它直接失效。
为什么 form 属性常被忽略或误用
多数人写表单时默认所有控件都得嵌套在 <form></form> 里，一旦遇到模态框、侧边栏、动态弹层等场景，就硬塞进主 <form></form> 或改用 JS 拼数据。其实 <fieldset form="myForm"></fieldset> 就是为此而生的原生方案，但它不自动“修复”语义断裂：如果目标 <form id="myForm"></form> 不存在、ID 写错、或被 JS 动态移除，浏览器不会报错，只是默默忽略该 fieldset 的提交行为——值根本不会进 FormData，也触发不了 submit 事件。
-
form属性只接受空格分隔的 ID 列表，比如form="a b"，但实际中极少用多表单绑定，单个 ID 更安全 - 它对
<legend></legend>无影响——<legend></legend>仍只服务本<fieldset></fieldset>的可访问性，不参与跨表单关联 - Chrome、Firefox、Safari（≥15.4）、Edge 全支持；IE 完全不支持，若需兼容，必须降级为 JS 手动收集
form 属性和控件自身 form 属性的区别
<fieldset></fieldset> 的 form 属性是“批量委托”：它让内部所有带 name 的可提交控件（<input>、<select></select>、<textarea></textarea>、<button type="submit"></button>）自动归属到指定表单，无需逐个加 form="myForm"。而单个控件的 form 属性是“个体绑定”，优先级更高——如果某个 <input> 同时在 <fieldset form="myForm"></fieldset> 内，又自己写了 form="otherForm"，那它最终归属 otherForm。
- 混合使用时，控件自身的
form属性会覆盖fieldset的设置 -
<fieldset></fieldset>的form属性不影响其disabled行为——禁用后，内部控件依然不提交，哪怕它们被绑到了外部表单 -
<fieldset></fieldset>自身不参与序列化，它的作用纯属“路由”：告诉浏览器“这些子控件该算谁的”
真实 DOM 结构中容易踩的三个坑
即使语法写对，DOM 实际结构也可能让 form 属性形同虚设：
- UI 框架（如 Ant Design、Mantine）常在渲染时剥离
<fieldset></fieldset>和<legend></legend>，只保留 div + CSS——此时你写的form="myForm"根本没挂载到真实节点上，检查开发者工具的 Elements 面板确认是否还存在 - 动态插入的
<fieldset></fieldset>必须在插入 DOM 后再确保目标<form id="myForm"></form>已存在；若<form></form>是后来才appendChild的，需手动触发form.dispatchEvent(new Event('submit'))或重置关联逻辑 -
<fieldset form="myForm"></fieldset>放在 Shadow DOM 内时，无法跨影子边界关联到 Light DOM 中的<form></form>；必须把<form></form>也放进同一 Shadow Root，或改用composed: true的自定义事件中转
提取数据时别指望 fieldset 自动打包
<fieldset form="myForm"></fieldset> 不改变数据结构——new FormData(myForm) 返回的仍是扁平键值对，不会按 fieldset 分组嵌套。想在 JS 中只取这一组的值，得手动遍历：
const fs = document.querySelector('fieldset[form="myForm"]');
const formData = new FormData();
fs.querySelectorAll('input[name], select[name], textarea[name]')
.forEach(el => {
if (!el.disabled && el.name) {
formData.append(el.name, el.value);
}
});
注意：form.elements 不包含跨 form 属性绑定进来的控件，所以不能靠 myForm.elements 反向筛选；必须从 fieldset 出发查后代。
真正容易被忽略的是：form 属性解决的是“归属问题”，不是“结构问题”。如果你需要服务端接收嵌套对象（如 {user: {name: 'a', email: 'b'}}），靠 DOM 分组毫无意义，老实用 name="user[name]" 这类命名约定——否则前端一挪动元素位置，后端就收不到数据。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
