HTML表单禁止嵌套，这是HTML5规范强制要求，会导致DOM结构错乱、控件丢失和提交数据不全；正确替代方案包括：①单form+fieldset分组，②多个独立form+JS提交，③用form属性解耦。
HTML表单根本不能嵌套
浏览器解析时会直接截断内层 <form>，导致外层提前闭合、控件丢失、提交数据不全——这不是兼容性问题，是 HTML5 规范强制要求。你写的 <form><form></form></form> 在 DOM 中实际变成两个独立的 <form>，中间那个可能被移到 <body> 底部，甚至被丢弃。
常见错误现象和 DOM 表现
典型症状包括：
- 点击内层 submit 按钮，整个页面跳转或提交了外层所有字段
-
document.querySelector('form').elements拿不到“本该在内层”的<input> - 用
FormData构造后，console.log([...formData])缺少某些字段 - 开发者工具 Elements 面板里看到
<form>被自动闭合，后续内容变成同级节点
真正能用的三种替代方案
要实现“逻辑分组 + 独立提交 + 字段隔离”，别碰嵌套，改用这些：
- 单个
<form>+<fieldset>分组：用name="user[name]"、name="payment[card_number]"命名，后端按方括号约定解析；<fieldset disabled>可一键禁用整组控件（注意老 Android WebView 对 disabled 样式支持不稳） - 多个独立
<form>+ JS 控制提交：每个<form>保持完整结构，但绑定submit事件，调用event.preventDefault()，再用fetch()发送各自FormData；记得对空值、文件字段做判空，否则后端可能收到字符串"undefined" - 用
form属性解耦：把按钮或输入框放在任意位置，加form="target-id"显式绑定到目标<form>；例如<button type="submit" form="edit-form">保存</button>；但 IE 完全不支持该属性，需确认兼容范围
表格里放表单最容易踩的坑
很多人想让每行一个编辑表单，结果把 <form> 直接塞进 <tr> 或 <table> 内部——这是双重违规：<table> 只允许 <tr>、<thead> 等作为子元素；<tr> 只接受 <td> 和 <th>。浏览器会立刻把 <form> 移出结构，造成 DOM 错乱。
立即学习“前端免费学习笔记（深入）”；
正确做法只有一条：所有表单控件必须落在 <td> 或 <th> 内部。比如每行编辑区，就用一个 <td colspan="N"> 包住整个 <form>，确保层级干净。
动态增删表格行时，name 属性中的索引（如 rows[2][price]）必须同步更新，否则后端收到的数组会出现空项或覆盖；PHP、Flask、Express 默认都支持这种方括号语法，但避免用字符串键（如 rows[first][name]），部分解析器不认。
