<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>与<input type="button">的区别的更多相关文章
- <select>与<datalist>的区别
size:下拉框中每次出现选项的个数 multiple:可以一次性选多个选项: disabled:时下拉框不可用,无法点击选项 list:它的值应于id的值对应 datalist要与input标签一 ...
- [转]ThinkPHP中实例化对象M()和D()的区别,select和find的区别
1.ThinkPHP中实例化对象M()和D()的区别 在实例化的过程中,经常使用D方法和M方法,这两个方法的区别在于M方法实例化模型无需用户为每个数据表定义模型类,如果D方法没有找到定义的模型类,则会 ...
- JS-005-常见下拉列表 Select 和 datalist
下拉列表在我们日常的网页浏览的过程中,随处可见,是 web 编程过程中大家非常熟悉的一个页面元素,随着 HTML 语言的日益强大,其在广大攻城狮的手中可谓是千变万化,有了很多不同的实现方式.本文主要以 ...
- ThinkPHP中实例化对象M()和D()的区别,select和find的区别
原文:ThinkPHP中实例化对象M()和D()的区别,select和find的区别 1.ThinkPHP中实例化对象M()和D()的区别 在实例化的过程中,经常使用D方法和M方法,这两个方法的区别在 ...
- Select()和SelectMany()的区别
Select与SelectMany的区别 Select() 和 SelectMany() 的工作都是依据源值生成一个或多个结果值. Select() 为每个源值生成一个结果值.因此,总体结果是一个与源 ...
- select 和epoll模型区别
1.select 和epoll模型区别 1.1.网络IO模型概述 通常来说,网络IO可以抽象成用户态和内核态之间的数据交换.一次网络数据读取操作(read),可以拆分成两个步骤:1)网卡驱动等待数据准 ...
- python下的select模块使用 以及epoll与select、poll的区别
python下的select模块使用 以及epoll与select.poll的区别 先说epoll与select.poll的区别(总结) 整理http://www.zhihu.com/question ...
- SQL中select与set的区别-转载
下表列出 SET 与 SELECT 的区别 SELECT SET 同时对多个变量同时赋值时 支持 不支持 表达式返回多个值时 将返回的最后一个值赋给变量 出错 表达式未返回值时 变量保持原值 变量 ...
- select count(*)和select count(1)的区别 (转)
A 一般情况下,Select Count (*)和Select Count(1)两着返回结果是一样的 假如表沒有主键(Primary key), 那么count(1)比count(*)快, 如果有主键 ...
- Select与SelectMany的区别
Select() 和 SelectMany() 的工作都是依据源值生成一个或多个结果值. Select() 为每个源值生成一个结果值.因此,总体结果是一个与源集合具有相同元素数目的集合.与之相反,Se ...
随机推荐
- Hibernate学习笔记(3)---hibernate关联关系映射
一对一关联 假设有两个持久化类(实体类)User与Address,它们之间存在一对一的关系 1,通过主键关联(个人偏向另外一种) User.hbm.xml文件配置 <id name=" ...
- Python使用Tabula提取PDF表格数据
今天遇到一个批量读取pdf文件中表格数据的需求,样式大体是以下这样: python读取PDF无非就是三种方式(我所了解的),pdfminer.pdf2htmlEX 和 Tabula.综合考虑后,选择了 ...
- Tsung测试Tcp协议的应用或接口
利用Tsung模拟基于Tcp的业务流程,实属无奈.因ConnectManager部署在linux下,其中,Loadrunner的winsocket因不支持linux platform而无法使用,而Jm ...
- 8086cpu中的标志寄存器与比较指令
在8086CPU中有一个特殊的寄存器--标志寄存器,该寄存器不同于其他寄存器,普通寄存器是用来存放数据的读取整个寄存器具有一定的含义,但是标志寄存器是每一位都有固定的含义,记录在运算中产生的信息,标志 ...
- 冒泡算法给0~9随机n位数字排序
<?php //产生5位0~9的随机数 function getRand($begin=0,$end=9,$limit=5){ $rand_array=r ...
- Android之Bmob移动后端云服务器
源码下载:http://download.csdn.net/download/jjhahage/10034519 PS:一般情况下,我们在写android程序的时候,想要实现登录注册功能,可以选择自己 ...
- [转]设置Jupyter-Notebook表格打印多个变量的值
有一点已经众所周知.把变量名称或没有定义输出结果的语句放在cell的最后一行,无需print语句,Jupyter也会显示变量值.当使用Pandas DataFrames时这一点尤其有用,因为输出结果为 ...
- 进入docker登录psql数据库对特定表进行操作
查看docker镜像 docker ps 运行镜像的脚本命令 docker exec -it 08 bash # 选择id为08开头的镜像运行bash 登录数据库 (1)直接登录 执行命令:psql ...
- AOP及spring AOP的使用
介绍 AOP是一种概念(思想),并没有设定具体语言的实现. AOP是对oop的一种补充,不是取而代之. 具体思想:定义一个切面,在切面的纵向定义处理方法,处理完成之后,回到横向业务流. 特征 散布于应 ...
- Nginx性能优化技巧(6)
一.编译安装过程优化 1.减小Nginx编译后的文件大小 在编译Nginx时,默认以debug模式进行,而在debug模式下会插入很多跟踪和ASSERT之类的信息,编译完成后,一个Nginx要有好几兆 ...