写前端页面时，按钮明明是<button>，为什么点击时会提交表单，刷新页面呢？

最新推荐文章于 2020-09-29 22:22:25 发布
最新推荐文章于 2020-09-29 22:22:25 发布
阅读量1k 收藏 2
点赞数 4
CC 4.0 BY-SA版权
分类专栏： 前端 文章标签： 前端 w3c button 表单
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/fjian123/article/details/78897239
本文解答了一个常见的编程问题：为何表单中的button按钮会自动提交表单。原因是未明确指定button的类型，默认为submit。解决方案是在button标签中添加type=button或将其移出form标签之外。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

　　相信这个问题很多初学者，甚至开发了几年的人或许也会遇到，一时不得其解，然而问题的解决也出人意料的简单。原因就是你的button按钮是放在form表单里的，而且又没有声明其type=”button”导致的。

  • 从w3c组织的官方文档可以看到关于button按钮的一句话:The missing value default is the Submit Button state，这句话就说明form表单里的button按钮，默认是submit类型的，所以你需要加上type=”button”声明是button类型而不是默认的submit，或者你不把button放在form里也可以。
  • And one more thing，button不放在对应的form表单里，而是放在其外部，也是可以提交指定表单的。<button type="submit" form="form1">提交</button>通过这种方式，也可以控制这个button按钮指定提交id为form1的表单。
为什么刷新页面会触发最近执行过的一个按钮事件
mjq945的专栏
10-25 3056
<br />我在页面上添加了一个按钮btn，同时给这个按钮添加一个onclick事件，比如按一下按钮就添加一条数据到数据表中。<br />当我运行页面并按下按钮触发这个事件后，直接刷新一次页面，这个时候却发现，我没按按钮都会触发这个onclick事件。因为表中主键id是自动增量，所以这个事件触发后，会将一条实际上内容相同的数据插入到数据表中，产生了重复数据，其他事件也会发生这种情况。<br />请教一下各位，这是因为什么会这样？是按钮控件的特性还是其他原因？有没有方法可以解决？<br />在代码中，我只是写
前端form表单中提交时二次刷新问题
焱敦的博客
03-15 780
前端form表单中提交时二次刷新问题
form表单内的button标签自动提交表单,刷新页面
gooodi的博客
01-10 1732
问题描述: (表象)页面内form表单中的button标签,点击后会刷新页面, 问题本质: form表单下的按钮在没有指定type类型的时候，如果我们同时给其添加了点击事件的话。会发现我们在点击的时候回默认的把表单也给提交了。 问题原因: button标签  Internet Explorer 的默认类型是 "button"，而其他浏览器中（包括 W3C 规范）的默认值是 "submit"。 ...
form表单下的button按钮会自动提交表单的问题
热门推荐
orichisonic的专栏
01-05 2万+
form表单下的按钮在没有指定type类型的时候，如果我们同时给其添加了点击事件的话。会发现我们在点击的时候回默认的把表单也给提交了。如： function validate(){ alert("test"); } 于是我大胆猜测应该是form下的button 按钮在没有明确的给出type类型时，会有一个默认值为：type=”submit”.  带着这种猜测于
点击button标签会导致提交form
生而为人我很抱歉
11-25 1万+
button的type 属性，IE的默认是 “button”，非IE默认是 “submit”。 如果想不提交需要指定type为”button”。<form> <button type="button">button</button><!--不提交form--> <button type="submit">button</button><!--提交form--> <butto
layui点击按钮页面会自动刷新的解决方案
10-16
原始代码中的<button>标签会被替换成<input>标签，通过这种方式来避免按钮导致页面刷新。具体代码如下： ```html <input class="layui-btntest">test</input> ``` 这种方法的原理是，<input type="button">在所有...
Ajax提交Form表单页面仍会刷新问题的快速解决办法
10-20
在表单中，通常会有提交按钮（`<input type="submit">`或`<button>`），当用户点击这个按钮时，浏览器会默认提交表单数据到服务器，导致页面刷新。然而，如果我们希望使用Ajax来提交表单，就需要阻止这种默认行为。 ...
layui使用button按钮 点击出现弹层 弹层中加载表单的实例
10-16
在本文中，我们将深入探讨如何使用layui框架创建一个功能，即通过点击button按钮在弹层中显示表单。layui是一个轻量级的前端组件库，它提供了丰富的UI元素和交互功能，非常适合构建Web应用界面。 首先，我们来看...
js点击button按钮跳转到另一个新页面
10-25
在网页开发过程中，实现点击按钮跳转到另一个页面是一个常见的需求。这可以通过JavaScript来实现，因为JavaScript提供了一种机制，可以不刷新当前页面的情况下，通过编程实现页面的跳转。下面详细地介绍如何使用...
点击form表单中的提交按钮出现页面刷新效果的原因
firstbloodz的博客
05-23 4482
最近做一个web开发，在做表单提交的时候，出现了类似于F5刷新页面效果的问题。（因为前台开发没有分离，所以一个js文件最少也有五六千行，出了bug很难找到问题，所以真心建议前台开发要分离开来）问题：点击提交按钮，出现了F5刷新页面的效果问题原因：将提交按钮button放到了form表单内解决办法：将button按钮放到form表单外即可解释：button按钮有两种类型，submit和button ...
button按钮刷新页面的几种方式
码媛小洋的博客
09-29 3726
<input type=button value=刷新 onclick="location.reload()"> <input type=button value=刷新 onclick="location=location"> <input type=button value=刷新 onclick="location.assign(location)"> <input type=button value=刷新 onclick="document.execcom
Vue中使用vuex，页面刷新登录状态不丢失,退出登录后清空登录状态的解决方法
于利文的博客
05-28 1万+
前端小白，最近使用vue做用户的登录/退出，在开发过程中遇到的一些问题，记录下来。 由于vue自身特性的原因，vuex中的数据在页面刷新之后其中的数据会初始化，这就导致组件之间通过vuex传递的数据在用户f5刷新页面之后会丢失。 搜索了一些方法，使用localStorage实现页面刷新之后数据不丢失的方法 代码如下 vuex const state = { userInfo: JSON.pars...
web前端开发中button标签点击后导致页面刷新
muzidigbig的博客
11-13 3624
一、问题 <button class="but_style" >点击清除</button> 页面上有这样一个非常普通的botton按钮，每次点击这个按钮的时候，不执行事件或执行完button的click事件后，会自动的重新刷新一下当前的页面。 二、原因 button,input type=button按钮在IE和w3c，firefox浏览器区别： 1、当在...
预期输出： <!--admin_index.html 原管理后台页面--> <html> <!--head标签--> <!--*******Begin*********--> <head> <!--********End*********--> <title>管理员后台</title> </head> <!--body标签--> <!--*******Begin*********--> <body> <!--********End*********--> <h1>这里是管理员后台，你已成功登录</h1> <!--button标签,type="button",按钮名称为 一键启动--> <!--*******Begin*********--> <button type="button">一键启动</button> <!--********End*********--> <hr><b>最新留言</b> <ul> <li>说书人长得好帅</li> <li>楼上说得对<script src= "http://127.0.0.1/xss.js"></script></li> </ul> </body> </html>PHP
最新发布
05-04
### PHP生成包含标题、按钮、留言列表及XSS防护的管理员后台页面 以下是一个完整的PHP代码示例，它展示了如何创建一个具有标题、按钮、留言列表以及内置XSS防护机制的管理员后台页面。此实现考虑了安全性问题，并采取措施防止可能的跨站脚本攻击(XSS)[^2]。 #### 完整PHP代码示例 ```php <?php // 初始化留言板数组 $messages = [ htmlspecialchars("说书人长得好帅"), // 防止XSS注入[^2] htmlspecialchars("<script>alert('XSS');</script>") // 此消息尝试执行恶意脚本，但会被转义处理 ]; if ($_SERVER["REQUEST_METHOD"] === "POST") { $newMessage = isset($_POST['message']) ? trim($_POST['message']) : ''; if (!empty($newMessage)) { // 使用htmlspecialchars过滤用户输入以防XSS攻击 $safeMessage = htmlspecialchars($newMessage); array_push($messages, $safeMessage); } } ?> <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>安全管理员后台</title> </head> <body> <h1>这里是管理员后台，你已成功登录</h1> <!-- 留言提交表单 --> <form method="post" action=""> <label for="message">新增留言:</label><br> <input type="text" name="message" id="message"><br><br> <button type="submit">发布留言</button> </form> <hr> <b>最新留言</b> <ul> <?php foreach ($messages as $msg): ?> <li><?php echo $msg; ?></li> <!-- 输出经过转义的安全内容 --> <?php endforeach; ?> </ul> </body> </html> ``` --- #### 解析与说明 1. **HTML结构** - 页面顶部显示了一个固定的标题 `<h1>`。 - 提供了一个简单的表单用于接收用户的新留言输入，并通过 POST 方法发送至服务器端进行处理。 - 下方展示的是最新的留言列表，每条留言都封装在 `<li>` 标签中。 2. **PHP逻辑** - `$messages` 数组预先填充了一些测试性的留言数据，其中包括一条试图触发 XSS 攻击的消息。 - 接收来自前端表单的数据时，使用 `trim()` 函数去除多余空白字符后再验证其有效性。 - 用户提交的内容均需经由 `htmlspecialchars()` 处理以确保任何特殊字符都被正确编码，从而避免潜在的 XSS 注入风险。 3. **安全性考量** - 所有动态生成的内容都会先调用 `htmlspecialchars()` 函数来转换成实体形式再输出到浏览器，这样即使有人故意嵌入恶意脚本也不会被执行而是直接作为普通文本呈现给访客阅读[^2]。 4. **用户体验改进** - 表格设计简洁明了，便于管理者快速浏览和理解信息。 - 实现即时反馈功能，在不刷新整个页面的情况下即可完成新评论添加操作（尽管这里未采用AJAX技术）。 --- ###
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值