表单逻辑嵌套需靠form、fieldset和form属性协同实现，否则提交丢数据、无障碍失效、js无法获取结构；tr内不能直接放form（仅允许td/th），div无表单管辖能力，fieldset是唯一支持语义分组与批量控制的单元，form属性可解耦物理位置与逻辑归属。
表单逻辑嵌套不靠视觉嵌套，而靠 form、fieldset 和 form 属性三者协同——否则你写的“嵌套”只是看起来像，提交时数据会丢、无障碍会失效、JS 也拿不到预期结构。
为什么不能把 form 塞进 tr 或 div 里
浏览器强制校验 HTML 结构：tr 只能直接包含 td 或 th；div 不是表单容器，放进去的 input 有 name 也不会被序列化。常见错误现象包括：
-
document.querySelector('form').elements拿不到预期控件 - 点击提交按钮后，后端收不到任何字段（尤其在表格行内写独立表单时）
- 用
FormData构造实例时漏掉部分字段
根本原因：这些元素没被任何一个合法 form 容器“管辖”。不是样式问题，是 DOM 归属断裂。
fieldset 是唯一支持语义化分组 + 批量控制的嵌套单元
fieldset 不是 div 的替代品，它天然具备逻辑分组能力，且影响表单行为：
- 必须用
legend作第一个子元素，且只能有一个——这是屏幕阅读器识别该组意图的唯一依据 - 设
disabled在fieldset上，内部所有input、select、button自动禁用（包括提交按钮） - 可以嵌套：比如外层
fieldset表示“收货信息”，内层再套一个fieldset表示“发票信息” - 不能把
form放进fieldset——层级反了，form必须是顶层容器
示例中若用 div class="section" 替代 fieldset，则无法通过 JS 批量启用/禁用整组，也无法被无障碍工具归类。
HTML5 form 属性解耦物理位置与逻辑归属
当表单控件必须脱离 form 标签物理范围（如放在弹窗、表格单元格、侧边栏），就靠 form 属性显式绑定：
- 给
form加id="order-form"，再给任意位置的input加form="order-form" - 支持的元素包括：
input、textarea、select、button（但不包括label或output） - 一个控件只能属于一个
form，重复设置以最后出现的form属性为准 - 注意：IE 不支持，现代浏览器均兼容；若需兼容旧环境，得回退到 JS 手动收集
典型场景：表格每行一个编辑操作，每个 input 在 td 里，但所有行共用一个隐藏的 form 在页面顶部——靠 form 属性关联，而非强行把 form 塞进 tr。
嵌套中的可访问性断点最容易被忽略
结构对了，不代表可访问性就通了。两个关键断点常被跳过：
-
label必须绑定：要么用for指向控件id（且该id必须存在、唯一），要么用隐式包裹（input是label的直接子元素） -
fieldset+legend是分组的语义锚点，不能用h3或div模拟——否则屏幕阅读器读不出“这部分是支付信息”，只读出一堆孤立输入框
真正复杂的表单不是字段多，而是逻辑分层深、交互状态多、辅助技术依赖强。结构上少一个 fieldset，或漏一个 form 属性，就可能让整组字段在语音导航中“消失”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
