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

随机推荐

css挖坑爬坑之div高宽相等
目标效果对于这么一个头像,外面是一个圆角的div里面是一个img,对于外面的div我要使他高度等于宽度. 发现问题开始的时候设置宽度为100%然后高度为100%,这样子对于宽度来说的话可以撑满页面 ...
Sql 关于查俩个表第二个表用到第一个表的某一个数据
今天在写程序的时候遇到一个问题有一个这个需求 select top 1 Name,[Address] from UserInfo;select * from shoppingAddress whe ...
golang 最和谐的子序列
We define a harmonious array is an array where the difference between its maximum value and its mini ...
angular4.0单个标签不能同时使用ngFor和ngIf
这个问题估计是ng4严格了语法规范的原因. 介于这篇太短,附上图助助兴致解决办法: <div *ngFor="表达式"> <ng-container *ngIf ...
css-display
1. none:隐藏对象.与visibility属性的hidden值不同,其不为被隐藏的对象保留其物理空间 2. inline:指定对象为内联元素. 3. block:指定对象为块元素. 4. inl ...
hadoop+hive+spark搭建（一）
1.准备三台虚拟机 2.hadoop+hive+spark+java软件包传送门:Hadoop官网 Hive官网 Spark官网一.修改主机名,hosts文件主机名修改 hostnam ...
Python使用Tabula提取PDF表格数据
今天遇到一个批量读取pdf文件中表格数据的需求,样式大体是以下这样: python读取PDF无非就是三种方式(我所了解的),pdfminer.pdf2htmlEX 和 Tabula.综合考虑后,选择了 ...
tcp链接断开的探测
有资料说,read.write都可以探测tcp的断开,但都不是实时的. 但是实际在某些设备上测试发现,即使开一个线程每隔一小段时间发一次心跳包(write),write也不能探测连接已经断开,而且这个 ...
【三分模板】洛谷P3382三分模板
题目描述如题,给出一个N次函数,保证在范围[l,r]内存在一点x,使得[l,x]上单调增,[x,r]上单调减.试求出x的值. 输入输出格式输入格式: 第一行一次包含一个正整数N和两个实数l.r,含 ...
浏览器history操作实现一些功能
返回拦截功能:从广告进入到落地页后,给history增加一个页面,拦截返回动作主要用到的是h5中的history对象,使用了pushState,和replaceState来操作. 并且加入了一些条 ...

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

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

随机推荐

热门专题