html5禁止嵌套form元素，浏览器会自动截断内层form导致数据丢失；应使用form属性关联控件与表单，或并列放置多个独立表单。
HTML5 不允许嵌套 <form></form> 元素 —— 这是规范硬性限制，浏览器会自动截断或忽略内部的 <form></form>，导致行为不可预测。
为什么浏览器会“吃掉”内层 <form></form>
HTML5 标准明确禁止 <form></form> 作为其他 <form></form> 的子元素。解析器遇到嵌套时，会按“遇到闭合标签前先关闭当前表单”的规则处理，实际 DOM 中第二个 <form></form> 可能被移出、挂到 body 下，或直接丢弃。
- Chrome / Firefox / Safari 均将内层
<form></form>视为无效，控制台通常不报错，但document.querySelectorAll('form')数量少于预期 - 表单控件（如
<input name="x">）若在被“移出”的<form></form>内，提交时不会被包含 —— 这是最常见的数据丢失原因 - 使用
form属性可绕过嵌套需求，它是 HTML5 引入的解耦机制
用 form 属性替代嵌套
把表单控件“关联到指定表单”，而不必放在其内部。控件和 <form></form> 可以在 DOM 中任意位置，只要 form 属性值匹配目标 id。
<form id="login-form"> <input type="text" name="username"> <button type="submit">登录</button> </form> <p><div class="settings-section"> <!-- 这个 input 不在 form 标签内，但属于 login-form --> <input type="checkbox" name="remember" form="login-form"> 记住我 </div>
-
form属性只接受一个id字符串，不能写多个或 CSS 选择器 - 控件仍需有
name，否则提交时不会发送该字段 - JavaScript 操作时，
input.form会返回对应<form></form>元素，可用于验证或监听
多表单共存但不嵌套的常见结构
一个页面多个独立表单（如搜索框 + 评论框 + 订阅栏），应并列放置，用语义化容器隔离，而非尝试包裹。
立即学习“前端免费学习笔记（深入）”；
<header>
<form id="search-form">
<input type="search" name="q">
</form>
</header>
<p><main>
<form id="comment-form">
<textarea name="content"></textarea>
<button type="submit">提交评论</button>
</form>
</main></p><p><aside>
<form id="subscribe-form">
<input type="email" name="email">
<button type="submit">订阅</button>
</form>
</aside>- 每个
<form></form>必须有唯一id，方便 CSS 定位、JS 绑定和form属性引用 - 避免用
<div> 包裹多个 <code><form></form>并称其为“嵌套表单”——这不属于嵌套，只是视觉分组 - 若需统一提交逻辑，用 JS 分别监听各表单的
submit事件，不要试图用一个 handler 拦截“父表单”
真正容易被忽略的是：表单控件的 form 属性在服务器端接收时完全透明，它只影响客户端提交范围；而很多人调试时只查 HTML 结构，没检查最终提交的 FormData 是否包含预期字段。
