CSS按钮样式之button标签与input type=button的区别

发布时间 2023-12-05 11:16:00作者: yinghualeihenmei

原文链接:1、https://www.cnblogs.com/weihanli/p/5162828.html

                 2、https://www.cnblogs.com/smile6542/p/11968175.html

    

如果想要在页面上表示一个显示文本的按钮推荐input[type=”button”]方式,如果想要呈现一个图片内容或内容更丰富的按钮推荐使用button元素;

如果在普通标签中使用,两者没有区别
如果在form表单中使用,<input type="button">不会提交表单,而<button type="submit">或者<button>(默认type="submit")会引起表单的提交。
<button type="button"> <button type="reset">不会引起表单提交。

 

一、按钮上显示文本的控制
1.input[type="button"]这种方式可能大家都比较熟悉了,控制这种方式的按钮的显示文本只需要设置input的value属性即可,value属性的值就是显示在按钮上的文本

2.button标签方式,设置value的值对于显示按钮的文本并没有什么影响,下面是一段代码的测试结果,测试的浏览器分别是 chrome,IE11和Edge,经过这段代码测试可以确定的是,决定button标签表示的按钮的文本不是由value值控制的,而是由标签间的文本决定的;

3、input[type="button"]这种按钮推荐控制value来控制显示按钮的文本,button标签显示的按钮推荐使用控制元素的innerText属性来控制显示文本

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

nput[type="button"]按钮点击之后,并未出现页面跳转的情况,由此可以说明表单并未提交;而对比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元素