JavaScript 浅谈 button 和 input type=button 的区别

最新推荐文章于 2020-12-11 15:47:31 发布
最新推荐文章于 2020-12-11 15:47:31 发布
阅读量190 收藏
点赞数
文章标签： javascript ViewUI
原文链接：https://juejin.im/post/5b32e2926fb9a00e373be33e
版权


####标签 与的对比

定义和用法

标签定义一个按钮。在button元素内部，您可以放置内容，比如文本或图像。这是该元素与使用input元素创建的按钮之间的不同之处。控件与<inputtype="button">相比，提供了更为强大的功能和更丰富的内容。与标签之间的所有内容都是按钮的内容，其中包括任何可接受的正文内容，比如文本或多媒体内容。例如，我们可以在按钮中包括一个图像和相关的文本，用它们在按钮中创建一个吸引人的标记图像。唯一禁止使用的元素是图像映射，因为它对鼠标和键盘敏感的动作会干扰表单按钮的行为。请始终为按钮规定type属性。InternetExplorer的默认类型是"button"，而其他浏览器中（包括W3C规范）的默认值是"submit"。

浏览器支持 所有主流浏览器都支持标签。

重要事项：如果在HTML表单中使用button元素，不同的浏览器会提交不同的值。InternetExplorer将提交

与之间的文本，而其他浏览器将提交value属性的内容。请在HTML表单中使用input元素来创建按钮。

原文参考链接

weixin_34217773
关注
button和input type=button的区别及注意事项
09-28
在HTML中，`<button>`和`<input type="button">`都是用于创建按钮的元素，但它们之间存在一些关键的区别。理解这些差异对于编写兼容各种浏览器和提供良好用户体验的网页至关重要。 首先，`<button>`标签允许在按钮...
一些IE特有的JS方法
smartview的专栏
02-23 1715
脚本说明：    把如下代码加入区域中:    后退 前进            返回           查看源码           禁止查看源码           刷新按钮一        function ReloadButton(){location.href="i001.htm";}       刷新按钮二           回首页按钮        function HomeBu
＜button＞和＜input type=“button“＞ 的区别
CQG1988的博客
12-01 701
定义和用法 <button>标签定义一个按钮。 在button元素内部，您可以放置内容，比如文本或图像。这是该元素与使用input元素创建的按钮之间的不同之处。 <button>控件 与<input type="button">相比，提供了更为强大的功能和更丰富的内容。<button>与</button>标签之间的所有内容都是按钮的内容，其中包括任何可接受的正文内容，比如文本或多媒体内容。例如，我们可以在按钮中包括一个图...
js验证表单提交的多种方法,submit,button, type='button'
qq_45064049的博客
05-18 1万+
js验证表单提交第一种用submit按钮提交表单第二种用button按钮进行提交第三种用第一种用submit按钮提交表单 <!doctype html> <html> <head> <title></title> </head> <body> <form action="index.php" method...
JavaScript的书写位置
高先生的猫
12-11 443
js有3种书写位置，分别为行内、内嵌和外部。 行内式 <input type="button" value="点我试试" onclick="alert('Hello World')" /> 可以将单行或少量js代码写在html标签的事件属性中（以 on 开头的属性），如：onclick 注意单双引号的使用：在html中我们推荐使用双引号, JS 中我们推荐使用单引号 可读性差， 在html中编写JS大量代码时，不方便阅读； 引号易错，引号多层嵌套匹配时，非常容易弄...
前端做按钮的方法介绍以及input与button的区别
Lemontree_fu的博客
03-05 1575
开工了！！！ 四种方法： 1 <input type=“button” /> 这就是一个按钮。如果你不写javascript 的话，按下去什么也不会发生。 2 <input type=“submit” /> 这样的按钮用户点击之后会自动提交 form，除非你写了javascript 阻止它。会提交到form标签的指定action路径中，详细请翻阅文档查看form标签。 ...
JS中type="button"和type="submit"的区别
10-19
在JavaScript和HTML交互中，创建按钮常常涉及到`type="button"`和`type="submit"`两种类型，它们在功能上有着显著的区别。理解这些差异对于优化表单操作和用户体验至关重要。 首先，`type="button"`的按钮是纯功能...
定义input type=file 样式的方法
12-14
要美化`file`控件，一种常见方法是使用CSS隐藏原生的`input type="file"`，并使用其他HTML元素（如`<input type="text">`和`<input type="button">`）来模拟其外观。这种方法的核心在于将`file`控件的位置调整到模拟...
BUTTON和INPUT的区别
10-31
### BUTTON和INPUT的区别 在网页开发中，`<button>` 和 `<input>` 是两种常见的用于创建用户交互元素的HTML标签。尽管它们都能实现按钮的功能，但在实际应用中却有着本质的区别。 #### HTML4.01规范中的表单控件 ...
button没写type=button会导致点击时提交
09-04
- 使用`<button>`元素而不是`<input type="button">`，因为`<button>`可以包含HTML内容，提供更好的可访问性和语义化。 - 对于JavaScript控制的按钮，始终指定`type="button"`，避免意外的表单提交。 - 避免在`...
【JS】input button 点击事件绑定几种方式
GreAmbWang的博客
08-11 1万+
一，通过onclick绑定 <input type="button" onclick ="afterClick()" id="btn" value="点击"/> onclick ="afterClick()"中记得写括号() JS代码 function afterClick() { alert("click"); } 二，通过id绑定事件 <inp...
html中的button按钮调用js函数和提交表单传递参数
热门推荐
wanderlustLee的博客
02-26 4万+
1.button的type设置为button 而不用submit，并添加onclick方法调用js函数 &lt;input type="button" name="confirmAlter" value="确认修改" onclick="changeInfo(form1.code,form1.name,form1.detail,form1.count)"/&gt; 2.传到js函数中，然后提交表...
解析<button>和<input type="button"> 的区别
zljpp的专栏
06-15 1696
一、定义和用法 &lt;button&gt; 标签定义的是一个按钮。 在 button 元素内部，可以放置文本或图像。这是&lt;button&gt;与使用 input 元素创建的按钮的不同之处。 二者相比较， &lt;button&gt; 控件提供了更为强大的功能和更丰富的内容。&lt;button&gt; 与 &lt;/button&gt; 标签之间的所有内容都是按钮的内容，其中包...
解析button和input type=button的区别
qq_36343904的博客
07-30 1189
一、定义和用法 标签定义的是一个按钮。 在 button 元素内部，可以放置文本或图像。这是与使用 input 元素创建的按钮的不同之处。 二者相比较， 控件提供了更为强大的功能和更丰富的内容。 与 标签之间的所有内容都是按钮的内容，其中包括任何可接受的正文内容，比如文本或多媒体内容。例如，我们可以在按钮中包括一个图像和相关的文本，用它们在按钮中创建一个吸引人的标记图像。 唯一禁止使用的元素...
input type="button" 和button区别
qq_38409944的博客
05-16 9063
来源： https://www.jianshu.com/p/687aabeedae5 在一个页面上画一个按钮，有四种办法：1、 &lt;input type=”button” /&gt; 这就是一个按钮。如果你不写javascript 的话，按下去什么也不会发生。2、 &lt;input type=”submit” /&gt;这样的按钮用户点击之后会自动提交 f...
Javascript button onclick和input type button在form中失效解决方案
svygh123的专栏
03-18 818
<form> <input type="button" onclick="reset()"> <button type="button" onclick="reset()">重置</button> </form> <script> function reset() { alert('invoke rese...
form 中input type=button 和 button的具体区别
最新发布
06-09
在 HTML 中，`<button>` 和 `<input type="button">` 都可以用来创建按钮，但它们有一些不同点： 1. 内容：`<button>` 可以包含文本和 HTML 标签，而 `<input type="button">` 只能包含文本。 2. 显示：`<button>` 默认会被渲染成带样式的按钮，而 `<input type="button">` 则不一定有样式。 3. 行为：当 `<button>` 被点击时，它的行为可以通过 JavaScript 来控制。而 `<input type="button">` 的行为只能通过表单提交或链接到其他页面来控制。 因此，如果你需要一个具有更多自定义选项和样式的按钮，可以使用 `<button>`。如果你只需要一个简单的按钮来提交表单或执行其他基本操作，那么使用 `<input type="button">` 也是可以的。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值