fieldset 本身不聚合表单数据，仅作语义分组；数据提取依赖 form、控件 name 属性及手动遍历筛选（需排除 disabled）；推荐用 name 前缀实现逻辑分组，避免耦合 dom 结构。
fieldset 元素本身不提供数据提取能力
直接通过 fieldset 获取“一组表单数据”是误解。HTML5 中 fieldset 仅是语义化容器，用于视觉分组和无障碍（如配合 legend），它不会自动聚合子控件的值，也不参与表单序列化逻辑。
真正决定数据如何被收集的是：form 元素、各表单控件的 name 属性，以及提交方式（submit、FormData、form.elements 等）。
用 form.elements 按 fieldset 范围筛选控件
若需手动提取某个 fieldset 内所有可提交控件的值，得先定位该 fieldset，再遍历其后代中带 name 的表单元素（input、select、textarea、button）。
-
fieldset下的disabled控件不会被包含在form.elements中，但会出现在fieldset.querySelectorAll(...)结果里 —— 需主动过滤 - 注意
type="hidden"和type="submit"等也属于可提交控件，是否纳入取决于业务逻辑 - 只读（
readonly）控件仍会被提交；禁用（disabled）则不会
const fs = document.querySelector('fieldset#user-info');
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);
}
});
// 此时 formData 只含该 fieldset 内有效控件的数据
用 name 前缀模拟逻辑分组（推荐做法）
更可靠、更通用的做法是：不依赖 DOM 结构，而用命名约定让后端或 JS 解析时能识别归属。例如统一加前缀 user[phone]、user[email]，或 billing_address[street]。
立即学习“前端免费学习笔记（深入）”；
- 服务端（如 PHP 的
$_POST['user']、Node.js 的body-parser）天然支持嵌套键名解析 -
前端用
new FormData(form)后，可通过entries()遍历并按前缀归类 - 避免因 DOM 移动、动态插入导致分组逻辑断裂
<fieldset>
<legend>收货地址</legend>
<input name="shipping[city]" value="Beijing">
<input name="shipping[zip]" value="100000">
</fieldset>
// 提交后，服务端收到 { shipping: { city: 'Beijing', zip: '100000' } }
注意 legend 不影响数据，但影响可访问性
legend 是 fieldset 的标题，对屏幕阅读器至关重要，但它没有 name、不参与表单数据提交，也不能用作 JS 数据提取的依据。
- 不要试图通过
legend.textContent推断字段分组用途 —— 它只是描述性文本 - 若需为某组字段添加元信息（如分组 ID），应使用
data-group-id等自定义属性 - 多个
fieldset嵌套时，子fieldset的控件仍属于外层form，不受嵌套层级影响提交行为
fieldset 标签本身，而在你如何组织 name、如何遍历和过滤控件、以及是否把 DOM 结构耦合进数据提取逻辑里。结构越松散，后期维护越稳。 
