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