三沣开发知识 购物 网址 游戏 小说 歌词 地图 快照 开发 股票 美女 新闻 笑话 | 汉字 软件 日历 阅读 下载 图书馆 编程 租车 短信 China
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
图片批量下载器
↓批量下载图片,美女图库↓
多播视频美女直播
↓电视,电影,美女直播,迅雷资源↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
vbs/VBScript DOS/BAT hta htc python perl 游戏相关 VBA 远程脚本 ColdFusion ruby专题
autoit seraphzone PowerShell linux shell Lua Golang Erlang 其它教程 CSS/HTML/Xhtml
html5 CSS XML/XSLT Dreamweaver教程 经验交流 开发者乐园 Android开发资料
站长资讯 .NET新手 ASP.NET C# WinForm Silverlight WCF CLR WPF XNA VisualStudio ASP.NET-MVC .NET控件开发 EntityFramework WinRT-Metro Java C++ PHP Delphi Python Ruby C语言 Erlang Go Swift Scala R语言 Verilog 其它语言 架构设计 面向对象 设计模式 领域驱动 Html-Css JavaScript jQuery HTML5 SharePoint GIS技术 SAP OracleERP DynamicsCRM K2 BPM 信息安全 企业信息 Android开发 iOS开发 WindowsPhone WindowsMobile 其他手机 敏捷开发 项目管理 软件工程 SQLServer Oracle MySQL NoSQL 其它数据库 Windows7 WindowsServer Linux
  IT知识库 -> Html-Css -> button与input[type=”button”]的区别 -> 正文阅读
 

[Html-Css]button与input[type=”button”]的区别

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属性来控制显示文本
二、在表单中两种方式的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元素
  Html-Css 最新文章
近期前端中的 一些常见的面试题
近期前端中的 一些常见的面试题
localStorage使用总结
前端
图文详解前端CSS中的Grid布局,你真的可以5
CSS3 按钮特效(一)
移动端css单位之 “vh” & “vw”
利用flex布局来column分布
让网页图片变灰色的三种方法
[转]移动web开发中meta标签作用
上一篇文章      下一篇文章      查看所有文章
加:2016-01-27 18:07:04  更:2017-05-16 05:23:53 
 
技术频道: 站长资讯 .NET新手区 ASP.NET C# WinForm Silverlight WCF CLR WPF XNA Visual Studio ASP.NET MVC .NET控件开发 Entity Framework WinRT/Metro Java C++ PHP Delphi Python Ruby C语言 Erlang Go Swift Scala R语言 Verilog 其它语言 架构设计 面向对象 设计模式 领域驱动设计 Html/Css JavaScript jQuery HTML5 SharePoint GIS技术 SAP Oracle ERP Dynamics CRM K2 BPM 信息安全 企业信息化其他 Android开发 iOS开发 Windows Phone Windows Mobile 其他手机开发 敏捷开发 项目与团队管理 软件工程其他 SQL Server Oracle MySQL NoSQL 其它数据库 Windows 7 Windows Server Linux
脚本语言: vbs/VBScript DOS/BAT hta htc python perl 游戏相关 VBA 远程脚本 ColdFusion ruby专题 autoit seraphzone PowerShell linux shell Lua Golang Erlang 其它教程
网站开发: CSS/HTML/Xhtml html5 CSS XML/XSLT Dreamweaver教程 经验交流 开发者乐园 Android开发资料
360图书馆 软件开发资料 文字转语音 购物精选 软件下载 美食菜谱 新闻资讯 电影视频 小游戏 Chinese Culture 股票 租车
生肖星座 三丰软件 视频 开发 短信 中国文化 网文精选 搜图网 美图 阅读网 多播 租车 短信 看图 日历 万年历 2018年7日历
2018-7-18 3:27:03
多播视频美女直播
↓电视,电影,美女直播,迅雷资源↓
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
图片批量下载器
↓批量下载图片,美女图库↓
  网站联系: qq:121756557 email:121756557@qq.com  IT知识库