HTML 表单按钮不提交

在HTML中，表单按钮通常用于提交表单数据。但是有时候我们可能想要在点击按钮时执行某些JavaScript代码，而不是提交表单。本文将介绍如何实现HTML表单按钮不提交的方法。

方法一：使用button元素

可以使用button元素而不是input元素来创建表单按钮。button元素可以包含任意内容（如文本、图标等），并且可以通过JavaScript来处理点击事件。

<button type="button" onclick="myFunction()">点击按钮</button>

<script>
function myFunction() {
  // 执行你的JavaScript代码
}
</script>

在上面的示例中，type="button"属性确保按钮不会提交表单。通过给按钮添加onclick属性来指定在点击按钮时要执行的JavaScript函数。你可以根据需要在myFunction()函数中编写自己的代码。

方法二：使用input元素的formnovalidate属性

如果想要保持使用input元素而不是button元素，可以使用formnovalidate属性。此属性告诉浏览器不要验证表单，并阻止提交动作。

<input type="submit" value="点击按钮" formnovalidate>

<script>
document.querySelector('input[type="submit"]').onclick = function() {
  // 执行你的JavaScript代码
};
</script>

在上面的示例中，formnovalidate属性被添加到input元素，告诉浏览器在点击按钮时不要验证表单。你可以根据需要在点击事件处理函数中编写自己的JavaScript代码。

方法三：使用event.preventDefault()

使用JavaScript事件处理函数也可以阻止表单的提交。通过调用事件对象的preventDefault()方法，可以取消默认的提交行为。

<form onsubmit="myFunction(event)">
  <input type="submit" value="点击按钮">
</form>

<script>
function myFunction(event) {
  event.preventDefault(); // 取消默认的提交行为

  // 执行你的JavaScript代码
}
</script>

在上面的示例中，onsubmit属性绑定一个事件处理函数，该函数在表单提交时被调用。在事件处理函数内部，使用event.preventDefault()取消默认的提交行为。你可以在函数中编写自己的JavaScript代码。

以上是三种实现HTML表单按钮不提交的方法，你可以根据需要选择使用其中一种方法。