如何阻止外部按钮提交 HTML 表单？

如何防止 HTML 按钮提交表单

在 Web 开发中，将按钮放置在表单外部通常允许您执行 JavaScript或点击后的其他自定义操作。但是，在某些情况下，这些外部按钮可能会无意中提交它们附近的表单。当您希望按钮执行单独的功能时，这可能会令人沮丧。

考虑以下场景：

<code class="html"><form id="myform">
    <label>Label <input /></label>
</form>
<button>My Button</button></code>

当您单击“我的按钮”元素时，您可能希望它触发 JavaScript。但是，它意外地提交了 myform。

要解决此问题，必须修改按钮的 HTML 代码以防止其提交表单：

<code class="html"><button type="button">My Button</button></code>

添加带有值的 type 属性“button” 明确指定该按钮不用于提交表单，从而禁用其提交功能。

更新（2019 年 2 月 5 日）：

根据根据 HTML Living Standard 和 HTML 5 规范，缺少 type 属性或 type 属性值无效会导致按钮默认为“提交按钮”状态。

以上是如何阻止外部按钮提交 HTML 表单？的详细内容。更多信息请关注PHP中文网其他相关文章！