button与input[type=”button”]的区别_html/css_WEB-ITnose

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

 

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

1. 使用button标签
2. 使用input，type的值设置为button

但是在实际的使用过程中，发现二者还是有不小的区别的，就目前的使用情况来说，个人推荐使用第二种input【type="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在有表单的页面会直接提交表单不可控制，个人推荐在页面上表示按钮的话用input[type="button"]方式不用button，另外控制input[type="button"]表示的按钮的显示文本时要设置value属性的值