innerHTML替换表单内容时内部表单被移除：浏览器行为及版本问询

问题背景 #

用户提供了一段代码，预期点击按钮后将id为aa1的<form>内部的<p>元素替换为另一个<form>，呈现嵌套边框效果：

<form id="aa1" style="border: solid 2px blue; padding: 4px;">
    <p>Original content</p>
</form>

<button type="button"
 onclick="document.getElementById('aa1').innerHTML = '<form id=\'aa2\' style=\'border: solid 8px red; padding: 4px;\'><p>New content</p></form>';">
 Click me
</button>

但在Windows系统的Chrome 119和Edge 118中，实际结果是内部<form>被移除，原段落被内部<form>的内容替换。已知HTML不允许嵌套表单，现提出以下疑问：

• 所有浏览器均如此表现吗？
• 该行为是否有官方文档描述？
• 浏览器从哪个版本开始采用此行为？

解答 #

1. 浏览器表现一致性 #

主流现代浏览器（Chrome、Edge、Firefox、Safari）都会处理嵌套表单的非法结构，核心表现一致：都会剥离内部<form>标签，仅保留其内部内容，不会呈现嵌套表单的效果。不同浏览器的细节处理可能略有差异，但最终都不会允许表单嵌套存在。

2. 官方文档依据 #

该行为符合HTML规范对无效结构的错误恢复机制：

• HTML标准明确规定<form>元素不能嵌套。当解析器遇到嵌套的<form>时，会自动触发错误修复逻辑：结束当前的<form>标签，再处理新的<form>，最终导致原表单被闭合，新表单无法嵌套在其中，仅保留内部内容。

3. 版本起始时间 #

Chromium系浏览器（Chrome、Edge）在2010年前后的版本就开始采用这种符合HTML5规范的错误恢复行为，和HTML5标准的普及同步。Firefox、Safari也在同期（2010-2012年左右）跟进了相同的逻辑，确保对无效表单结构的处理符合规范要求。

内容的提问来源于stack exchange，提问作者codetuner