button与input[type=”button”]的区别

button与input[type="button"]的区别

　　特别感谢 @守护晴天 ，指出了博客中不细致不严谨的地方，也让我学到了更多，更多是觉得抱歉，由于自己的不细致可能误导了一些朋友对button的看法，实在是抱歉，之前看过这篇博客的朋友如果有时间的话希望能够再看一遍或者看提供的pdf，pdf文档上有更改记录，下载有修改记录的pdf，下载无修改记录版pdf。

在html中，如今有两种方式可以在html页面上呈现出一个按钮。

1. 使用button标签
2. 使用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属性来控制显示文本

二、在表单中两种方式的onclick事件

修改测试代码，将两种按钮都放在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元素