解析button和input type=button 的区别
一、定义和用法
<button> 标签定义的是一个按钮。
在 button 元素内部,可以放置文本或图像。这是<button>与使用 input 元素创建的按钮的不同之处。
二者相比较, <button> 控件提供了更为强大的功能和更丰富的内容。<button> 与 </button> 标签之间的所有内容都是按钮的内容,其中包括任何可接受的正文内容,比如文本或多媒体内容。例如,我们可以在按钮中包括一个图像和相关的文本,用它们在按钮中创建一个吸引人的标记图像。
唯一禁止使用的元素是图像映射,因为它对鼠标和键盘敏感的动作会干扰表单按钮的行为。
请始终为按钮规定 type 属性。Internet Explorer 的默认类型是 "button",而其他浏览器中(包括 W3C 规范)的默认值是 "submit"。
二、浏览器支持
所有主流浏览器都支持 <button> 标签。
重要事项:如果在 HTML 表单中使用 button 元素,不同的浏览器会提交不同的值。Internet Explorer 将提交 <button> 与 <button/> 之间的文本,而其他浏览器将提交 value 属性的内容。请在 HTML 表单中使用 input 元素来创建按钮。
三、注意事项
在使用<button>标签时很容易想当然的当成 <input type="button">使用,这很容易产生以下几点错误用法:
1、通过$('#customBtn').val()获取<button id="customBtn" value="test">按钮</button> value的值
在IE(IE内核)下这样用到得的是值是“按钮”,而不是“test”,非IE下得到的是“test”。
这一点要和<input type="button">区分开。
通过这两种方式$('#customBtn').val(),$('#customBtn').attr('value')在不同浏览器的获得值,如下:
Browser/Value |
$('#customBtn').val() |
$('#customBtn').attr('value') |
Firefox13.0 |
test |
test |
Chrome15.0 |
test |
test |
Opera11.61 |
test |
test |
Safari5.1.4 |
test |
test |
IE9.0 |
按钮 |
按钮 |
验证这一点可以在测试下面的代码
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <script type="text/javascript" src="jquery-1.4.4.min.js"></script> <script type="text/javascript"> $(function() { $('#test1').click(function() { alert($('#customBtn').attr('value')); }); $('#test2').click(function() { alert($('#customBtn').val()); }); }); </script> </head> <body> <button id="customBtn" value="test">按钮</button> <input type="button" id="test1" value="get attr"/> <input type="button" id="test2" value="get val"/> </body> </html>
2、无意中把<button>标签放到了<form>标签中,你会发现点击这个button变成了提交,相当于<input type="submit"/>
不要把<button>标签当成<form>中的input元素。
验证这一点可以在测试下面的代码
<html> <body> <form action=""> <button> button </button> <input type="submit" value="input submit"/> <input type="button" value="input button"/> </form> </body> </html>
使用说明
当开发者希望给当前页面传值的时候可以使用把<button>标签,<button>标签放到了<form>标签中,点击这个button变成了提交,相当于<input type="submit"/>。也意味着是:将当前form表单中的值传递给了当前的页面。
转载于:https://www.cnblogs.com/coderL/p/6855374.html
解析button和input type=button 的区别相关推荐
- HTML button 和 input type=“button”的区别 / input type=submit 和button的区别
HTML <button> 和 input type="button"的区别: 1. <button>标签里可以放文本图片等内容,与<input> ...
- 解析button和input type=”button”的区别
一.定义和用法 <button> 标签定义的是一个按钮. 在 button 元素内部,可以放置文本或图像.这是<button>与使用 input 元素创建的按钮的不同之处. 二 ...
- button 与 input type=button 的区别【2012/07/23】
<button>标签定义按钮.其内部可以放置内容(文本或者图像),这也是它与input创建按钮的不同之处. <button> 控件 与 <input type=" ...
- button与input type=button 的区别
一.定义和用法 <button> 标签定义的是一个按钮. 在 button 元素内部,可以放置文本或图像.这是<button>与使用 input 元素创建的按钮的不同之处. 二 ...
- input type=button和asp:Button的区别
参考 https://www.cnblogs.com/fengwei0813/p/5574385.html https://bbs.csdn.net/topics/110186772 < inp ...
- HTMLbutton 标签和input type=button的区别
<button>标签的定义及用法 w3school的解释: <button> 标签定义一个按钮. 在 button 元素内部,您可以放置内容,比如文本或图像.这是该元素与使用 ...
- input type=button与asp:button的区别,以及runat=server的作用
<input type="button">与<asp:button>的区别,以及runat="server"的作用 在<input ...
- <input type = “button“>和<button></button>的区别
<p id="demo">单击按钮创建button元素</p><button onclick="myFunction()" val ...
- botton与input type=button的区别
一.定义和用法 <button> 标签定义的是一个按钮. 在 button 元素内部,可以放置文本或图像.这是<button>与使用 input 元素创建的按钮的不同之处. 二 ...
最新文章
- docker 异常:“fork/exec /proc/self/exe: no such file”
- Java学习小程序(9)冒泡排序算法实现
- P2906 [USACO08OPEN]Cow Neighborhoods G 切比雪夫距离 + 并查集 + set
- 034_nginx报错总结
- php异步处理任务工具,PHP实现异步任务分发处理利器-Gearman
- mongodb 去重查询 Java,mongodb篇二:mongodb克隆远程数据库,去重查询的命令及对应java语句...
- 763 划分字母区间
- 17R-无重复数字的三位数和去重后最大数
- 用WPF实现在ListView中的鼠标悬停Tooltip显示
- 036、JVM实战总结:糟糕!运行着的线上系统突然卡死无法访问,万恶的JVM GC!
- 编写组件,使用JavaScript更新UpdatePanel
- 服务器2003系统U盘安装方法,u盘winpe下安装windows server 2003详细教程
- 【Matlab学习笔记】【编程实例】二(将两幅灰度图片调整成相同的尺寸,然后左右拼接到一起)
- 分组码--原理,码率,软硬判决,编码增益
- Oprofile工具的使用
- 前端项目如何做测试?
- Win10下安装EPLAN P8 2.3时虚拟狗安装需要驱动数字签名的解决过程
- Git恢复被删除的文件
- 在matlab下使用预训练模型Alex Net进行迁移学习的实验与分析
- matlab红点沿着正弦曲线运动,如何使用css3让一个元素做正弦曲线运动?