form 标签在 HTML5 中禁止嵌套，浏览器会自动闭合外层 form；正确做法是用 fieldset 实现逻辑分组，或通过 form 属性绑定外部控件，且仅允许 form 包裹 table。
form 标签不能嵌套 form 标签
直接说结论：form 标签在 HTML5 规范中明确禁止嵌套。浏览器解析时会自动闭合前一个 form，导致内层表单被“踢出”到 body 下或直接丢弃——这不是兼容性问题，而是所有现代浏览器（Chrome、Firefox、Safari）统一执行的规范行为。
常见错误现象包括：
-
document.querySelectorAll('form')返回数量少于预期 - 内层
input提交时完全不发送（因为 DOM 中它已不属于任何form） - 点击内层
submit按钮，却触发了外层表单提交
根本原因在于：form 的 content model 不允许包含另一个 form。试图用 CSS 视觉模拟嵌套（比如 div 包裹 + 绝对定位）只会加剧语义断裂和 JS 控制混乱。
table 可以合法包裹 form，但顺序不能反
表格本身有严格嵌套规则，而 form 是块级元素，可以作为容器包裹整个 table，这是完全合规的写法。
立即学习“前端免费学习笔记（深入）”；
典型正确结构是：
<form action="/submit">
<table>
<tr><td><input name="username"></td></tr>
</table>
</form>
但反过来——把 form 放进 td 或 tr 内部再试图跨行/跨单元格提交——虽然部分浏览器能渲染，但属于非标准用法，会导致：
- 某些移动端 WebView 提交失败
-
form.elements获取不到跨单元格的控件 - 无障碍工具无法正确关联 label 和 input
所以记住：只允许 form 包 table，不要让 table 包 form 后再拆解逻辑。
fieldset 是 form 内唯一支持语义分组的嵌套容器
想在单个 form 中实现“逻辑嵌套”（比如用户信息 + 支付信息两个区块），fieldset 是 HTML 原生唯一推荐方案。
它合法嵌套在 form 中，且自带语义隔离能力：
-
legend提供区块标题，对屏幕阅读器友好 - 可独立禁用整组：
<fieldset disabled> - 后端可通过 name 前缀区分字段，如
user[email]和payment[card]
注意：fieldset 不能替代多个表单的提交边界——它仍属同一 form，提交时全部字段一起发。如果需要独立验证或分开提交，必须用 JS 拦截 + fetch 分发。
form 属性可解耦控件与表单位置
当按钮或输入框必须放在 form 外（比如模态框底部、侧边栏），用 form 属性显式绑定即可，无需移动 DOM：
<form id="profile-form"> <input name="name"> </form> <div class="sidebar"> <input type="checkbox" name="newsletter" form="profile-form"> <button type="submit" form="profile-form">保存</button> </div>
关键限制：
-
form属性值只能是目标form的id字符串，不支持 class 或其他选择器 - 控件仍需有
name，否则提交时不会携带该字段 - JS 中可通过
input.form获取所属form元素，用于动态验证
这个机制不是“绕过嵌套”，而是彻底放弃 DOM 层级依赖——它把归属关系从位置移到属性，更灵活但也更易漏写 name 或拼错 id。
真正容易被忽略的是：即使用了 form 属性，所有绑定控件仍共享同一个提交事件和默认行为。若页面存在多个此类“远程控件”，必须靠 JS 精确控制 event.target.form 来区分处理逻辑。
