你的位置:首页 > 网页设计

[网页设计]button与input[type=”button”]的区别


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属性的值