form标签禁止嵌套，浏览器会按HTML5规范自动修复DOM结构导致提交失败或JS获取异常；修复方式为并列放置或使用form属性解耦；表格内表单须遵循table→tbody→tr→td层级；dialog需为body直系子元素且button需显式设type。
form 标签不能嵌套 form 标签
浏览器会直接丢弃内层 form，导致控件不提交、JS 获取不到预期 DOM 结构。这不是兼容性问题，而是 HTML5 规范明令禁止的行为。
- Chrome、Firefox、Safari 都会在解析时自动闭合外层
form，再把内层form移到body下或直接忽略 -
document.querySelectorAll('form')返回数量少于预期，是第一个信号 - 表单控件（如
<input name="email">）若在被“移出”的form内，提交时不会包含该字段 - 修复方式只有两种：
form并列放置，或用form属性解耦控件与表单
表格内放表单必须走 tr → td 路径
把 form 直接写在 table 里但不在 tr 中，浏览器会执行错误恢复：自动闭合 form、把后续内容提到 table 外，DOM 完全错乱。
- 正确层级只能是：
table→tbody→tr→td→ 表单控件（或整个form） -
tbody建议显式写出，避免浏览器自动补全带来的结构不确定性 - 如果要让某行可编辑，就把整行的
td内容包进一个form，而不是把form放在tr外面 - 否则
:nth-child(odd)等 CSS 选择器会失效——因为tr被非法节点打断，序号重算
用 form 属性关联控件和表单
当控件物理位置无法放进目标 form 内部时（比如弹窗、侧边栏、表格单元格外的编辑按钮），form 属性是唯一合规替代方案。
- 控件需有
name，且form属性值必须严格匹配目标form的id - 示例：
<input type="text" name="title" form="edit-form">+<form id="edit-form"></form> -
input.form在 JS 中能正确返回对应form元素，可用于校验或监听 - 不支持多个 ID 或 CSS 选择器，只接受单个字符串
dialog 里放表单要避开 DOM 位置陷阱
dialog 必须是 body 的直系子元素，一旦嵌套在 form 或其他带 transform/overflow 的容器中，遮罩、居中、焦点都会异常。
立即学习“前端免费学习笔记（深入）”；
- 多步骤表单不要用多个
dialog，而应在单个dialog内用fieldset切换步骤 -
dialog必须写在body底部，完全脱离任何form的 DOM 树 -
dialog内的button默认是type="submit"，点“取消”也会触发表单提交，必须显式写type="button" - Safari 对
fieldset[disabled]渲染不可靠，建议用hidden控制显隐，并手动管理required和校验状态
