button与input[type=”button”]的区别
button与input[type="button"]的区别
特别感谢 @守护晴天 ，指出了博客中不细致不严谨的地方，也让我学到了更多，更多是觉得抱歉，由于自己的不细致可能误导了一些朋友对button的看法，实在是抱歉，之前看过这篇博客的朋友如果有时间的话希望能够再看一遍或者看提供的pdf，pdf文档上有更改记录，下载有修改记录的pdf，下载无修改记录版pdf。
在html中，如今有两种方式可以在html页面上呈现出一个按钮。
- 使用button标签
- 使用input，type的值设置为button
但是在实际的使用过程中，发现二者还是有不小的区别的，就目前的使用情况来说，如果想要在页面上表示一个显示文本的按钮推荐input[type=”button”]方式，如果想要呈现一个图片内容或内容更丰富的按钮推荐使用button元素
1.input[type="button"]这种方式可能大家都比较熟悉了，控制这种方式的按钮的显示文本只需要设置input的value属性即可，value属性的值就是显示在按钮上的文本
2.button标签方式，设置value的值对于显示按钮的文本并没有什么影响，下面是一段代码的测试结果，测试的浏览器分别是 chrome,IE11和Edge，经过这段代码测试可以确定的是，决定button标签表示的按钮的文本不是由value值控制的，而是由标签间的文本决定的
在添加onclick事件，设置value值，依次点击两个按钮的时候，结果是这样的
修改onclick事件，这次设置innerText属性，依点击触发onclick事件，测试的结果是这样的
总结上述测试结果，input[type="button"]这种按钮推荐控制value来控制显示按钮的文本，button标签显示的按钮推荐使用控制元素的innerText属性来控制显示文本
修改测试代码，将两种按钮都放在form中，添加onclick事件，在以上几个浏览器中测试结果相同故只截图了在edge浏览器中的显示效果
在点击button显示的按钮之后，效果是这样的，先弹出"entered"的对话框，之后页面跳转到了表单要提交的网址，必应首页
点击input[type="button"]按钮之后，出现弹窗之后并未出现页面跳转，仍然提留在了原页面
input[type="button"]按钮点击OK之后还是在这个页面，并未出现页面跳转的情况，由此可以说明表单并未提交，而对比button标签的按钮出现了页面跳转也就是表单提交，另外button也弹出了"entered"的提示窗口，说明也触发onclick事件，但是虽然事件并未提交表单，但是button的onclick事件依然提交了表单类似于一个input[type="submit"]元素。
-----------------------------------------补充----------------------------------------
以上是未对button元素设置type属性，如果不设置button元素的type属性，Internet Explorer 的默认类型是 "button"，而其他浏览器中（包括 W3C 规范）的默认值是 "submit"，因此请始终为button元素设置type属性，button元素的type属性值可选值为button、submit、reset，设置过button元素的type属性之后便不再有浏览器兼容性的问题了
三、使用button创建内容更丰富的按钮
各浏览器表现一致，示例代码如下：
截取页面在浏览器中的表现效果：
四、结论
综上所述， 如果想要在页面上表示一个显示文本的按钮推荐input[type=”button”]方式，如果想要呈现一个图片内容或内容更丰富的按钮推荐使用button元素
button与input[type=”button”]的区别的更多相关文章
- 关于<button> 没写 type='button' 导致点击时提交以及<button>和<input type="button">的区别
这是我的第一篇博客,如果写的不好,请见谅 这是一个关于button按钮一个小问题 最近刚开学跟着老师一起写代码,在模仿JAVA web程序设计(慕课版) P61页第三章 Ajax处理XML的代码中发现 ...
- <button>和<input type="button"> 的区别
<button>标签 定义和用法 <button> 标签定义一个按钮. 在 button 元素内部,您可以放置内容,比如文本或图像.这是该元素与使用 input 元素创建的按钮 ...
- <button>与<input type="button"> 的区别
<button> button按钮点击会刷新整个页面 <input type="button"> 不会刷新整个页面 本文为本人用来记录自己做的一些东西,如 ...
- <button>与<input type="button">的区别
一.定义和用法 <button> 标签定义的是一个按钮. 在 button 元素内部,可以放置文本或图像.这是<button>与使用 input 元素创建的按钮的不同之处. 二 ...
- 解析<button>和<input type="button"> 的区别
一.定义和用法 <button> 标签定义的是一个按钮. 在 button 元素内部,可以放置文本或图像.这是<button>与使用 input 元素创建的按钮的不同之处. 二 ...
- 解析button和input type=”button”的区别
一.定义和用法 <button> 标签定义的是一个按钮. 在 button 元素内部,可以放置文本或图像.这是<button>与使用 input 元素创建的按钮的不同之处. 二 ...
- <input type="button" /> 和<input type="submit" /> 的区别
<input type="button" /> 这就是一个按钮.如果你不写javascript 的话,按下去什么也不会发生.<input type="s ...
- 【转】解析<button>和<input type="button"> 的区别
一.定义和用法 <button> 标签定义的是一个按钮. 在 button 元素内部,可以放置文本或图像.这是<button>与使用 input 元素创建的按钮的不同之处. 二 ...
- <button>与<input type="button">
在做form表单,点击按钮随机生成两串密钥的时候 1.用第一种按钮的时候,会出现刷新form表单的现象.会把创建密钥前面的输入框中的字消失.虽然能生成密钥1和密钥2,但是会闪一下,随即消失.几个输入框 ...
随机推荐
- EasyUI笔记
以下功能实现朋友们若有更好的思路办法,欢迎留言交流. 1.关闭其他标签页(右键菜单触发,保留左侧第一个欢迎tab) 问题:取到的数组tabs长度会随着tab的关闭而变化 思路:先遍历需要关闭的标签页t ...
- Apache+MySQL+PHP开发环境的搭建（一）
通过套件来安装和配置php开发环境. 1.所需软件:AppServ(因为是开源,任何网站都能下载) 安装本软件基本上就是下一步. 2.进行安装 选择一个盘安装该软件点击next继续: 根据自己的实际情 ...
- github代码管理工具的使用方法
一.创建一个存储库 1.点击页面右上方你的用户名右边的+标志,然后点击下拉列表中的"new repository"选项,一般填写项目名称和选择public 和选择初始化有READM ...
- c#实现分组服务器，单一无重复生成ID
class Program { static void Main(string[] args) { List<Thread> threads = new List<Thread> ...
- Javascript动画效果（一）
Javascript动画效果(一) 前面我们介绍了Javascript的回到顶部效果,今天呢,我们对Javascript动画做进一步的研究.在这篇博文中我们只介绍简单的匀速运动.简单的缓冲运动和简单的 ...
- Hive SQL 监控系统 - Hive Falcon
1.概述 在开发工作当中,提交 Hadoop 任务,任务的运行详情,这是我们所关心的,当业务并不复杂的时候,我们可以使用 Hadoop 提供的命令工具去管理 YARN 中的任务.在编写 Hive SQ ...
- Json字符串反序列化
using DevComponents.DotNetBar; using MyControl; using Newtonsoft.Json; using System; using System.Co ...
- SQL更改表字段为自增标识
下面是SQL语句: --删除主键约束 ) select @Constraint_Name = Name from dbo.sysobjects where Xtype = 'PK' and Paren ...
- 同样的MVC,不同的实现方法(Spring MVC .Net MVC)
由于工作需要,最近将Net的MVC又重新好好的学习了一遍.学习教材是博客园里的大神的作品<ASP.NET MVC5框架揭秘>. <ASP.NET MVC5框架揭秘>这本书,说了 ...
- spring笔记2 spring MVC的基础知识2
2,spring MVC的注解驱动控制器,rest风格的支持 作为spring mvc的明星级别的功能,无疑是使得自己的code比较优雅的秘密武器: @RequestMapping处理用户的请求,下面 ...