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

徊忆羽菲

于 2024-07-31 10:49:11 发布

阅读量103

点赞数 4

分类专栏： Html 文章标签：学习 javascript 前端

本文链接：https://blog.csdn.net/guo_qiangqiang/article/details/140816927

版权

Html 专栏收录该内容

250 篇文章 8 订阅

订阅专栏

学习使用在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>