表单提交按钮中的表单同时触发答案

【问题标题】：Form inside a Form Submit Button Triggers Both表单提交按钮中的表单同时触发
【发布时间】：2021-09-13 22:18:21
【问题描述】：

我有一个表单来显示用户的个人资料并允许对其进行更改，并且在此表单内我还有一个按钮来显示带有用于更改密码的表单的模式（表单内的表单）。
当我单击按钮提交内部表单时，它同时提交。我知道这可以通过使用type="button" 并将 onClick 事件添加到提交表单的按钮来解决，但如果我这样做了，我也会禁用能够通过按 enter 键提交表单的功能。
另一种选择是将带有模式的按钮放在我的表单之外，但我想尽可能避免这样做，因为我还必须更改样式。
有更好的选择吗？哪个是最佳选择？

【问题讨论】：

标签： javascript html reactjs forms

【解决方案1】：

很遗憾，

（表单中的表单）。

HTML 规范不允许嵌套表单，结果是无效的 HTML 输出。

我建议使用以下选项，即使它需要更多工作：

另一种选择是将带有模式的按钮放在我的表单之外

每W3C spec:

流式内容，但没有表单元素后代。

相关stackoverflow讨论： Can you nest html forms?

【讨论】：

相关规范为here。 HTML 3 从未成为标准，如果有，那么现在它已经过时了。