学习使用在form表单内设置button按钮不提交

学习使用在form表单内设置button按钮不提交

要使form内的button不提交表单,可以在button元素上使用type="button"属性。这样,点击按钮时,不会触发表单的提交行为。

下面是一个HTML示例,展示了如何在form内使用button不提交表单:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Button Without Submitting Form</title>
</head>
<body>
    <form id="myForm">
        <input type="text" placeholder="Enter your name">
        <!-- 使用type="button"来避免提交表单 -->
        <button type="button" onclick="handleButtonClick()">Click Me</button>
    </form>

    <script>
        function handleButtonClick() {
      
      
            // 在这里编写按钮点击后的逻辑
            alert('Button clicked!');
            // 如果需要提交表单,可以在这里编写代码提交表单
            // document.getElementById('myForm').submit();
        }
    </script>
</body>
</html>

在这个例子中,当用户点击按钮时,不会有任何表单提交,而是执行handleButtonClick函数中的代码。如果需要提交表单,可以在函数中添加提交表单的代码,例如document.getElementById(‘myForm’).submit();。

猜你喜欢

转载自blog.csdn.net/guo_qiangqiang/article/details/140816927