html表单不允许嵌套，浏览器会自动闭合前一个form；应使用fieldset分组、独立form+js控制或form属性关联控件来替代。
HTML表单不能嵌套
直接说结论：<form></form> 标签在 HTML 规范中**不允许嵌套**。浏览器解析时，遇到第二个 <form></form> 开始标签，会自动闭合前一个未闭合的 <form></form> —— 这不是 bug，是规范行为。
常见错误现象包括：外层表单提交时字段丢失、内层 submit 按钮触发整个外层提交、JavaScript 获取 form.elements 时漏掉“本该在内层”的控件。
根本原因在于 HTML5 明确规定：<form></form> 是 可替换元素（replaced element），且其内容模型（content model）不包含另一个 <form></form>。所有现代浏览器都严格遵循这一规则。
为什么不能用多个 form 实现“逻辑嵌套”
有人尝试把多个独立 <form></form> 放在同一区域，靠 CSS 定位“看起来像嵌套”，但这只是视觉假象，实际带来三类问题：
- 语义断裂：屏幕阅读器、自动化测试工具无法理解“这组输入属于子任务”，
aria-owns或aria-labelledby都无法修复这种结构缺失 - 提交边界混乱：每个
<form></form>都有独立的submit事件和默认提交行为，无法统一控制“只提交当前卡片里的数据” - 表单控件归属失效：没有
form属性的<input>只属于最近的祖先<form></form>；若强行加form="id"指向外部表单，又会导致跨区域绑定，易出错
真正可用的替代方案
要实现“分组提交 + 独立验证 + 逻辑隔离”，优先用以下方式：
1. 单个 <form></form> + 语义化分组
用 <fieldset></fieldset> + <legend></legend> 划分逻辑区块，配合 name 前缀区分字段（如 user[name]、payment[card_number]）。后端按命名约定解析即可。
2. 多个独立 <form></form> + JavaScript 控制
每个表单保持独立，但通过 JS 阻止默认提交，收集各自字段，再用 fetch() 发送到不同接口。注意：必须显式设置 event.preventDefault()，否则仍会整页跳转。
3. 使用 form 属性关联控件（HTML5）
把按钮或输入框放在 <form></form> 外，用 form="target-form-id" 显式绑定。例如：<button type="submit" form="payment-form">支付</button>。这种方式支持“一个按钮触发表单”，但不解决“嵌套结构”本身。
容易被忽略的兼容性细节
form 属性在 IE 中完全不支持（包括 IE11），如果项目需兼容旧版 IE，只能放弃该写法；<fieldset></fieldset> 的 disabled 属性会禁用全部子控件，但部分老 Android WebView 对它的样式支持不一致；fetch() 提交需手动构造 FormData，别忘了对空值、文件字段做判空处理——否则后端可能收到 undefined 字符串而非 null。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
