前端问题：button按钮在form表单的时候会当成submit提交

最新推荐文章于 2022-01-25 18:13:43 发布
最新推荐文章于 2022-01-25 18:13:43 发布
阅读量1.5k 收藏 1
点赞数
CC 4.0 BY-SA版权
分类专栏： JavaScript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/weixin_41699562/article/details/99291600
本文揭示了一个关于HTML表单中button元素的常见误区。当button置于form内，默认行为会被视为submit按钮，触发表单提交。为避免此误用，推荐使用input type=button来实现非提交型按钮功能。

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

button按钮在form表单的时候会当成submit提交
在这里插入图片描述
input type=“button"
在这里插入图片描述

PS：遇到了一个坑是，button按钮在form表单的时候会当成submit提交，千万不要再当作button用了，如果想用button就用input type=“button" 来搞。

表单提交中的input、button、submit的区别
weixin_30376163的博客
12-29 2531
　　最近项目中用了很多的表单提交，发现input、button、submit甚至回车键都可以引发表单提交，下面将分别验证他们在使用中的区别。 1.input[type=submit] 我们直接来看例子： 代码如下： <form> <input name="name"> <input type="submit" value=...
JavaScript在form表单中使用button按钮实现submit提交方法
10-20
在form表单提交中，使用button来间接完成submit的提交更为灵活。接下来通过本文给大家介绍JavaScript在form表单中使用button按钮实现submit提交方法，需要的朋友参考下吧
使用提交按钮，提交数据
bailang3277的博客
05-29 222
在表单中有两种按钮可以使用，分别为：提交按钮、重置。这一小节讲解提交按钮：当用户需要提交表单信息到服务器时，需要用到提交按钮。 语法： <input type="submit" value="提交"> type：只有当type值设置为submit时，按钮才有提交作用 value：按钮上显示的文字 举例： 在浏览器中显示的结果： 转载于:https...
5-7使用提交按钮，提交数据
dada678的专栏
06-19 624
在表单中有两种按钮可以使用，分别为：提交按钮、重置。这一小节讲解提交按钮：当用户需要提交表单信息到服务器时，需要用到提交按钮。 语法： type="submit" value="提交"> type：只有当type值设置为submit时，按钮才有提交作用 value：按钮上显示的文字 举例： 在浏览器中显示的结果：
form表单下的button按钮会自动提交表单的问题
orichisonic的专栏
01-05 2万+
form表单下的按钮在没有指定type类型的时候，如果我们同时给其添加了点击事件的话。会发现我们在点击的时候回默认的把表单也给提交了。如： function validate(){ alert("test"); } 于是我大胆猜测应该是form下的button 按钮在没有明确的给出type类型时，会有一个默认值为：type=”submit”.  带着这种猜测于
Form表单里的BUTTON的type='submit'和'button'的区别
夏小沫学习之路
08-14 2451
1.submit 用于提交表单时 使用 onsubmit=”“<form class="form-horizontal" onsubmit="checkform()"> <div class="control-group"> <label class="control-label" for="inputEmail">Email</label> <div c
在一个form用一个SUBMIT(或button)分别提交到两个处理表单页面的代码
10-31
在一个网页表单(form)中，通常我们通过设置不同的提交按钮(submit或button)来实现将数据提交至不同的处理页面。然而，在某些特定情况下，我们可能需要仅使用一个提交按钮(submit或button)来将表单数据同时提交到两个...
使用layui前端框架弹出form表单以及提交的示例
10-16
在本文中，我们将深入探讨如何使用layui前端框架来弹出form表单并进行数据提交。layui是一款基于HTML5和CSS3的轻量级前端组件库，它提供了丰富的UI组件和强大的交互功能，使得Web开发更加便捷高效。下面，我们就按照...
form表单的两种提交方式，submit和button的用法
小熊Leo的专栏
12-05 8266
触发form表单的两种提交方式，submit和button的用法1.当输入用户名和密码为空的时候，需要判断。这时候就用到了校验用户名和密码，这个需要在jsp的前端页面写；有两种方法，一种是用submit提交。一种是用button提交。 方法一：在jsp的前端页面的头部插入一个js方法：function checkUser(){ var result = document.getElemen
form表单中 button 、 input type="button" 、 input type="submit" 的区别
shijiujiu33的博客
10-18 3137
1.&amp;lt; button &amp;gt;与&amp;lt; input type=“button” &amp;gt;其中一个重要的区别就是： 在 button 元素内部，您可以放置内容，比如文本或图像。这是该元素与使用 input 元素创建的按钮之间的不同之处。 &amp;lt; button &amp;gt; 控件 与 &amp;lt; input type=“button” &amp;gt; 相比，提供了更为强大的功能和更丰富的
触发form表单的两种提交方式，submit和button的用法
热门推荐
shadow_zed的博客
08-31 3万+
1.当输入用户名和密码为空的时候，需要判断。这时候就用到了校验用户名和密码，这个需要在jsp的前端页面写；有两种方法，一种是用submit提交。一种是用button提交。 方法一： 在jsp的前端页面的头部插入一个js方法： function checkUser(){ var result = document.getElementById("userid").value; var p...
button标签的认知
jarisMA的博客
08-27 384
标签的认知 发布时间：2018-01-31 16:19:31 有三个类型 type=“submit”：提交按钮（除了 Internet Explorer，该值是其他浏览器的默认值）。 type=“button”：可点击的按钮（Internet Explorer 的默认值）。 type=“reset”：重置按钮（清除表单数据）。 PS：当button标签被form标签包含时，eg： <fo...
html点击按钮后页面刷新的问题，form表单中button按钮触发submit点击事件
MaYuKang的博客
10-09 7507
html点击按钮 有如下form表单，包含了一个button按钮： 情况1： <form action=""> <button onclick="">我是按钮</button> </from> 尽管button按钮没有执行任函数，但是点击按钮后，页面刷新。 情况2： <form action="http://www.baidu.com"> <button onclick="">我是按钮</button> </fr
javascript在form表单中使用button按钮实现submit提交方法
有种轰趴我
01-22 1万+
在form表单提交中，使用button来间接完成submit的提交更为灵活。下面是实现方法： 使用button按钮实现submit提交，需要在button标签中的使用onclick方法，然后在javascript中实现具体，代码如下： function submitBtnClick(){ document.fileForm.submit(); } 检索
【前端】实现form表单中提交按钮为submit类型时，进行判断后才提交跳转
rensheng2020的博客
01-25 6742
一.form表单简介 表单是由窗体和控件组成的,一个表单一般应该包含用户填写信息的输入框、提交按钮等，这些输入框、按钮叫做控件,表单就像容器,它能够容纳各种各样的控件。 表单标签的格式: < form action＝"url" method="get|post" name=“myform” >< /form > 参数说明： action：提交到的地址（后台地址） name：表单提交时的名称 method：提交方式，默认为get post和get区别： 数据提交方式，get–提交的数
用button提交表单php,JavaScript在form表单中使用button按钮实现submit提交方法
weixin_32597009的博客
03-11 1831
submit是button的一个特例，也是button的一种，它把提交这个动作自动集成了，submit和button,二者都以按钮的形式展现,看起来都是按钮，所不同的是type属性和处发响应的事件上。在form表单提交中，使用button来间接完成submit的提交更为灵活。下面是实现方法：使用button按钮实现submit提交，需要在button标签中的使用onclick方法，然后在JavaS...
CSS美化HTML表单控件：submit与button的区别与美化示例
此外，文章还提到了一个实际应用的例子，说明如何在JavaScript中通过`form1.action`和`form1.submit()`来实现提交功能，以及如何使用`<a>`标签链接作为表单的提交目标。 本文提供了丰富的示例和技巧，帮助读者了解...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值