没有 `type="submit"` 的提交按钮如何工作

Posted 2023-02-19

【中文标题】没有 `type="submit"` 的提交按钮如何工作

【英文标题】：How submit button works without `type="submit"`

【发布时间】：2020-11-14 18:33:03

【问题描述】：

我正在 react-hook-form 文档中检查此示例：https://codesandbox.io/s/react-hook-form-v6-controller-qsd8r?file=/src/index.js

奇怪的是按钮没有type="submit"。但是点击后仍然会触发提交事件。 （下面附上截图。）

它如何知道哪个按钮是提交按钮？

【问题讨论】：

作为侧节点：如果多个<button> 元素没有type="submit" 或"type="button"，则默认情况下将始终放置后者，因此您将拥有多个按钮能够提交表单。 type="button" 剥夺提交能力。

【参考方案1】：

如果button 在form 内，则默认情况下它被赋予submit 类型，除非你给它其他类型。

因此，该代码框中的重置按钮具有type="button" 以防止其触发事件，但提交按钮将其留空，因此默认情况下提交。

参考：Moz Docs