如何防止按钮在 HTML 和 JavaScript 中提交表单？

如何防止按钮提交表单

在 HTML 中，当单击表单中的按钮时，通常会触发表单提交。但是，在某些情况下，您可能希望按钮在不提交表单的情况下执行特定操作。

考虑以下表单：

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

在此示例中，单击按钮仍会触发表单提交，即使它位于表单元素之外。为了防止这种不良行为，您可以为按钮指定 type="button" 属性：

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

通过 JavaScript 的替代解决方案

如果您更喜欢处理使用 JavaScript，您可以禁用默认的表单提交行为。下面是一个使用事件监听器的示例：

<code class="html"><button onclick="event.preventDefault();">My Button</button></code>

在这种情况下，event.preventDefault() 函数会阻止单击按钮时提交表单。

结论

通过为按钮指定 type="button" 或使用 JavaScript 抑制默认操作，您可以阻止按钮提交表单，即使它位于表单元素之外。

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