解析button和input type=button 的区别

最新推荐文章于 2025-07-07 10:47:51 发布
最新推荐文章于 2025-07-07 10:47:51 发布
阅读量282 收藏 1
点赞数
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/dyfc3sfd3s/article/details/89947512
博客指出在form表单里，button按钮会被当作submit提交，不能再单纯当作button使用。若要使用button功能，建议用input type=“button”来实现。

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

很简单，就一句话。

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

dyfc3sfd3s
关注
button和input type=button的区别及注意事项
01-19
<button>标签 定义和用法 <button>标签定义一个按钮。 在button元素内部，您可以放置内容，比如文本或图像。这是该元素与使用input元素创建的按钮之间的不同之处。 <button>控件与<inputtype>相比，提供了更为强大的功能和更丰富的内容。<button>与</button>标签之间的所有内容都是按钮的内容，其中包括任何可接受的正文内容，比如文本或多媒体内容。例如，我们可以在按钮中包括一个图像和相关的文本，用它们在按钮中创建一个吸引人的标记图像。 唯一禁止使用的元素是图像映射，因为它对鼠标和键盘敏感的动作会干扰表单按钮的行为。 请始终为按钮规定t
解析<button>和<input type="button"> 的区别
zljpp的专栏
06-15 1776
一、定义和用法 &lt;button&gt; 标签定义的是一个按钮。 在 button 元素内部，可以放置文本或图像。这是&lt;button&gt;与使用 input 元素创建的按钮的不同之处。 二者相比较， &lt;button&gt; 控件提供了更为强大的功能和更丰富的内容。&lt;button&gt; 与 &lt;/button&gt; 标签之间的所有内容都是按钮的内容，其中包...
input type="button" 和button区别
qq_38409944的博客
05-16 9149
来源： https://www.jianshu.com/p/687aabeedae5 在一个页面上画一个按钮，有四种办法：1、 &lt;input type=”button” /&gt; 这就是一个按钮。如果你不写javascript 的话，按下去什么也不会发生。2、 &lt;input type=”submit” /&gt;这样的按钮用户点击之后会自动提交 f...
button 和input 的区别及在表单form中的用法
weixin_30950237的博客
03-17 317
先说一下button 和input的定义： <button>标签定义的是一个按钮 1、在 <button> 元素内部，您可以放置任何内容，比如文本或图像。这是该元素与使用 <input> 元素创建的按钮之间的不同之处； 2、 <button>控件提供了更为强大的功能和更丰富的内容； 3、<button>...
button和input type=“button”的区别
gxf_ming的博客
03-06 559
1.button内部可放置图片和文本，input只可以写文本。 2.input 需要规定type的属性，ie默认为button  其他浏览器默认为submit。 3.ie提交的是 与之间的文本，其他浏览器提交的是value属性的内容。所以一般情况下用input创建按钮 4. 通过$('#customBtn').val()获取按钮 value的值      在IE(IE内核)下这样
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>计算器1</title> <link rel="stylesheet" href="MyStyle.css" /> <!-- <script type="text/javascript" src="index.js"></script> --> </head> <body> <div class="calculator"> <input class="output" value="" id="output" disabled="disabled"/> <div> <div class="numbers"> <input type="button" value="7" onclick="calculator.numberClick(7)"/> <input type="button" value="8" onclick="calculator.numberClick(8)"/> <input type="button" value="9" onclick="calculator.numberClick(9)"/> <input type="button" value="4" onclick="calculator.numberClick(4)"/> <input type="button" value="5" onclick="calculator.numberClick(5)"/> <input type="button" value="6" onclick="calculator.numberClick(6)"/> <input type="button" value="3" onclick="calculator.numberClick(3)"/> <input type="button" value="2" onclick="calculator.numberClick(2)"/> <input type="button" value="1" onclick="calculator.numberClick(1)"/> <input type="button" value="0" onclick="calculator.numberClick(0)"/> <input type="button" value="AC" onclick="calculator.numberClick(value)"/> <input type="button" value="=" onclick="calculator.numberClick(value)"/> </div> <div class="operators"> <input type="button" value="*" onclick="calculator.numberClick(value)"/> <input type="button" value="-" onclick="calculator.numberClick(value)"/> <input type="button" value="+" onclick="calculator.numberClick(value)"/> <input type="button" value="/" onclick="calculator.numberClick('/')"/> </div>
03-14
<input type="text" id="display" readonly> <div class="buttons"> <button onclick="clearDisplay()">C</button> <button onclick="appendToDisplay('+')">+</button> <button onclick="appendToDisplay('-')...
<input type="button" :value="msg"/>这种和<button>按钮</button>这种一样吗
04-01
嗯，用户问的是 `<input type="button" :value="msg"/>` 和 `<button>按钮</button>` 是否一样。我需要先回想一下HTML中的按钮元素和输入类型按钮的区别。 首先，用户可能是在使用Vue.js，因为看到了`:value="msg"`...
请帮我完善简易计算器的js代码，我将提供html和css代码 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>计算器1</title> <link rel="stylesheet" href="MyStyle.css" /> <script type="text/javascript" src="index.js"></script> </head> <body> <div class="calculator"> <input class="output" value="" id="output" disabled="disabled"/> <div> <div class="numbers"> <input type="button" value="7" onclick="calculator.numberClick(7)"/> <input type="button" value="8" onclick="calculator.numberClick(8)"/> <input type="button" value="9" onclick="calculator.numberClick(9)"/> <input type="button" value="4" onclick="calculator.numberClick(4)"/> <input type="button" value="5" onclick="calculator.numberClick(5)"/> <input type="button" value="6" onclick="calculator.numberClick(6)"/> <input type="button" value="3" onclick="calculator.numberClick(3)"/> <input type="button" value="2" onclick="calculator.numberClick(2)"/> <input type="button" value="1" onclick="calculator.numberClick(1)"/> <input type="button" value="0" onclick="calculator.numberClick(0)"/> <input type="button" value="AC" onclick="calculator.numberClick(value)"/> <input type="button" value="=" onclick="calculator.numberClick(value)"/> </div> <div class="operators"> <input type="button" value="*" onclick="calculator.numberClick(value)"/> <input type="button" value="-" onclick="calculator.numberClick(value)"/> <input type="button" value="+" onclick="calculator.numberClick(value)"/> <input type="button" value="/" onclick="calculator.numberClick('/')"/>
03-14
此函数通过获取 ID 为 'expression' 的 `<input>` 元素并将其值设置为现有值加上新按下的数字字符[^3]。 #### 运算符的操作 同样地，也需要定义类似的函数用于添加运算符到表达式中。需要注意的是，在连续按下两个...
``` <table> <tr> <td> <input type = "button" value = "传统记账" class = "R_button"> <form action = ""> <input type = "submit" value = "导出" class = "R_button"> </form> <form id="printForm" action="" method="post"> <input type="hidden" id="selectedTelsHiddenField" name="telsToPrint"> <input type="submit" value="打印" onclick="return submitSelectedTels();" class = "R_button"> </form> <input type = "button" value = "模板" onclick ="template.show()" class = "R_button"> </td> </tr> </table>```让这四个按钮在一行
03-18
<input type="button" value="模板" onclick="template.show()" class="R_button"> ``` #### 解析： 1. **CSS 设置** 使用了 `.inline-form { display: inline; }` 来确保所有的 `<form>` 元素不再独占一行...
button和input type=button的区别
qq_57215961的博客
06-15 2348
两种按钮的区别 1. button是双标签 input是单标签 2. button的信息写在标签内input的信息写在value里 同时的值很广泛，有文字、图像、移动、水平线、框架、分组框、音频视频等3. 单击双击事件 可以直接写在button里添加用户综上。推荐使用button。...
button和input button的区别
qq_44369304的博客
09-06 3040
button和 input button的区别 在按钮的外表方面： 虽然这两个标签都是用来实现按钮，一般的使用下看起来并无区别，但是button标签相对来说比较灵活，可以把图像做成按钮，更加美观。 在功能上： 两个标签都是实现按钮的功能，但要注意，在表单中，input button是普通的按钮，但button会相当于input submit，可以提交表单数据。但button提交表单数据在不同浏览器会提交不一样的值，因此在表单中尽量使用input标签。 ...
<button> 与 <input type="button" /> 的区别
lio-zero 的博客
11-14 301
<button> 可以包含 HTML。<input type="button" /> 是空元素(如 br、hr、image)，因此不能包含内容。 <button> 支持伪元素，例如 ::after 和 ::before，这对于设置按钮样式非常有用。而 <input type="button" /> 没有。 默认情况下，<button> ...
HTML ＜button＞ 与 ＜input type=“button“＞ 的区别
最新发布
echo_123qq的博客
07-07 412
这两种元素都可以创建按钮，但它们有重要差异： 是闭合标签，可以包含文本、HTML内容甚至子元素 默认类型是 （在表单中会提交表单），所以通常需要显式声明 是自闭合标签，只能通过 属性设置按钮文字 不能包含其他内容或HTML 2. 样式与灵活性 更容易样式化，支持伪元素(::before, ::after) 在某些浏览器中的默认样式可能不同 在不同浏览器中的样式行为更一致 3. 表单行为 两者默认都不会提交表单 如果不指定 属性，默认是 类型 永远是普通按钮，不会提交表
input type="button"和button的区别
qq_23350817的博客
11-14 1318
&lt;input id="btn1" type="button"/&gt;不是双边标签，标签中间的内容不能自定义，按钮的提示只能通过value属性提示 &lt;button id="btn2"&gt;&lt;/button&gt;中间可以自定义，比如在中间加入&lt;img /&gt;，可以得到一个图片按钮 &lt;button&gt;&lt;/butt
button 与input【button】的区别
tao__f的博客
10-05 1188
<button>和<input type=“button”> 的具体区别 1、关闭标签设置。<input>禁用关闭标签</input>。闭合的写法：<input type=“submit” value=“OK” />。 <button>的起始标签和关闭标签都是必须的，如 <button>OK</button>。 2、 <button> 的值并不是写在value属性里，而是在起始、关闭标签
button元素与input元素的区别
qq_33745501的博客
11-20 2486
一、button元素        1.type属性为button、reset、submit。        2.button元素在浏览器中的默认值不同，一定要明确指定button类型（IE中为button，其他浏览器为submit）        3. 表单中使用button元素时，不同的额浏览器提交的值不一样(IE提交的是button元素之间的值，其他浏览器提交的是 button元素的v
form表单中 button 、 input type="button" 、 input type="submit" 的区别
shijiujiu33的博客
10-18 3130
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; 相比，提供了更为强大的功能和更丰富的
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值