为何未挂载到DOM的表单调用form.submit()无响应？

我可以通过style.display = 'none'创建隐藏表单：

var form = document.createElement("form");
form.method = "POST";
form.action = "//test.local/login.php";
form.style.display = 'none';
// 挂载到DOM后可以正常提交
document.body.appendChild(form);
form.submit();

原本想无需隐藏表单，而是不将其加入文档DOM（移除document.body.appendChild(form);这行代码），但此时调用form.submit();毫无作用。为何表单必须挂载到DOM才能让submit()方法生效？

核心原因是浏览器的安全机制和表单提交的上下文依赖：

• 浏览器安全限制：浏览器会拦截游离DOM节点（未挂载到文档的元素）的表单提交，防止恶意脚本在用户毫无察觉的情况下发起未经授权的请求。虽然隐藏表单（设置style.display='none'）也不可见，但它属于当前文档DOM的一部分，浏览器能追踪到它的存在，因此允许提交。
• 表单提交需要文档上下文：表单的submit()方法执行时，需要依托当前页面的浏览上下文来处理请求发送、页面跳转等逻辑。未挂载的表单不属于任何文档，没有对应的上下文环境，浏览器无法确定该提交操作关联的页面，因此不会执行提交动作。

简单来说，隐藏表单是“存在于文档中但看不见”，而未挂载的表单是“完全不在文档体系里”，浏览器只认可前者的提交请求。

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