<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 ...

随机推荐

python中星号的意义（**字典，*列表或元组）
传递实参和定义形参(所谓实参就是调用函数时传入的参数,形参则是定义函数是定义的参数)的时候,你还可以使用两个特殊的语法:*.** . 调用函数时使用* ,** test(*args)中 * 的作用:其 ...
win10 音频服务未响应的解决方法
最近在调试usb audio设备,由于使用的是自己的audio 设备,所以要频繁的更换采样率,可是在win10中经常出现一些莫名其妙的问题,今天这个问题就是折腾了我好久才搞定的. 当把usb aud ...
mayavi安装
Mayavi是python的一个包,提供方便的可视化方案.目前(20150809)Mayavi还没有py3的支持,以下安装环境在python 2.7.10下进行安装Mayavi: 1. 通过pip ...
Linux重启后raid5的名字发生变化
Linux重启后raid5的名字发生变化使用raid,每次重启后,都会变换设备路径比如原来为/dev/md0 重启一次变成了/dev/md127 这个问题,可以使用修改配置文件来解决. 1.mda ...
CHECKDB内部：什么是BlobEater？
DBCC CHECKDB注意到有关数据文件页面.一旦整个表的所有页(或一组表,如果配料已启用-看到同样的博客文章我上面提到的),所有的事实都聚集在一起,他们都应该相互抵消.当有额外的事实(在索引B树都 ...
linux socket编程：简易客户端与服务端
什么是socket? socket起源于Unix,而Unix/Linux基本哲学之一就是“一切皆文件”,都可以用“打开open –> 读写write/read –> 关闭close”模式来 ...
Linux 监测命令
1. ps -ef -e显示所有进程:-f 显示完整格式的输出: 2. ps -l -l 显示一个长列表 3. ps -efH -H 用层级格式显示进程(树状) [ps 命令:显示某个特定 ...
AssertionError while merging cells with xlwt (Python)
产生这一错误的原因是,行列数字的赋值有问题,三行数字大于下行数字,左列数字大于右列数字. sheet.write_merge(top_row, bottom_row, left_column, rig ...
Nginx是如何处理Request的？
nginx是如何匹配过来的请求,然后做处理的呢?这个匹配的过程可以分为两步: 1.选择server 2.选择location 选择server 仅仅匹配server name 加入Nginx的配 ...
Linux中oops信息调试【转】
1.Oops 信息来源及格式 Oops 这个单词含义为“惊讶”,当内核出错时(比如访问非法地址)打印出来的信息被称为 Oops 信息. 2.Oops 信息包含以下几部分内容 2.1 一段文本描述信息. ...

<button>与<input type="button">的区别

<button>与<input type="button">的区别的更多相关文章

随机推荐

热门专题