首页 技术文章 css

禁止button提交表单

发布日期: 2024-02-21
FontSize: 【小 中 大】
禁止button提交表单

当页面中出现按钮的时候，最好使用<button>标签，所以您在页面中使用<button>来创建按钮，而不是使用<div>或<a>标签，您优化了html代码，但是，您发现点击按钮却跳转到了另一个页面。

我们总是会经常使用到各种按钮，可是并不是网页中所有出现的按钮，都要提交表单。

为什么点击button会自动提交表单？

因为button的默认属性就是提单按钮，所以您在表单里面点击了这种按钮，就会提交当前表单。

<button>元素是html中用于创建按钮的标签。可能有些人会喜欢使用<div>或<a>标签来充当按钮，因为css样式更好控制，但建议<a>标签用于页面中的超级链接，尊重html的标签语义（题外话）。

<button>标签的type属性有三个值：

submit：拥有该值的按钮，点击会提交表单，如果留空，submit为默认值，所以如果您的button里面没有type属性时，点击它就自动提交了表单；

reset：拥有该值的按钮，点击会重置表单；

button：type属性的值为 "button"，用于创建一个普通的按钮，没有与之关联的默认行为。如果不想点击按钮误提交了表单，可以将按钮设置为此属性；

例如：

使用type="button"属性不会提交表单

<button type="button">普通按钮</button>

使用javascript禁止button提交表单

您还可以使用js控制按钮禁止提交表单。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<script>
    function fun(e) {
    	e.preventDefault(); // 阻止表单的默认提交行为
    }
  </script>
</head>
<body>
<form action="https://z.lichil.com" target="_blank">
	<!-- 表单内容 -->
	<button onclick="fun(event)">按钮</button>
</form>
</body>
</html>

 

html javascript