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

随机推荐

Xamarin~Android篇~监听返回键，单击返回某个webView，双击退出
https://www.cnblogs.com/lori/p/5088627.html DateTime? lastBackKeyDownTime; public override bool OnKe ...
Vue 爬坑之路（八）—— 使用 Echarts 创建图表
在后台管理系统中,图表是一个很普遍的元素.目前常用的图标插件有 charts, Echarts, highcharts.这次将介绍 Echarts 在 Vue 项目中的应用. 一.安装插件使用 c ...
Swift语言中与C/C++和Java不同的语法（三）
这一部分的主要内容是Swift中的Collections 我们知道Java中的Collection基本上是每一个Java程序猿接触到的第一个重要的知识点. 在Swift中也不例外,Swift中的Col ...
SignalR的另类实现技巧
很久之前发表过一篇名为<通过三个DEMO学会SignalR的三种实现方式>的文章,在那篇文章里面详细介绍了在WEB应用下的常用SignalR实现方法,而今天我们来利用SignalR来实现其 ...
TPYBoard实例之利用WHID为隔离主机建立隐秘通道
本文作者:xiaowuyi,来自FreeBuf.COM(MicroPythonQQ交流群:157816561,公众号:MicroPython玩家汇) 0引言从2014年BADUSB出现以后,USB- ...
css实现网格背景
只使用一个渐变时,我们能创建的图案并不多,当我们把多个渐变图案组合起来,让他们透过彼此的透明区域显现时,神奇的事情就发生了!我们首先想到的是把水平和水质条纹叠加起来,就可以得到各种各样的网格. 1. ...
vmvare centos 7.0 root密码忘记后重置及总结
今天遇到了一个比较尴尬的事情,我centos 7.0的虚拟机密码忘了.....里面还有我配置好的环境呢.于是我就上网上搜索各种方法,最后经我验证下面这个方法比较靠谱: 使用光盘修复Centos: ht ...
【django基础】
一.MTV模型 Django的MTV分别代表: Model(模型):负责业务对象与数据库的对象(ORM) Template(模版):负责如何把页面展示给用户 View(视图):负责业务逻辑,并在适当的 ...
webpack构建本地服务器
webpack构建本地服务器想不想让你的浏览器监测你的代码的修改,并自动刷新修改后的结果,其实Webpack提供一个可选的本地开发服务器,这个本地服务器基于node.js构建, 可以实现你想要的这些 ...
原来你是这样的JAVA[03]-继承、多态、抽象类
一.继承 Java中的继承使用关键字extends ,跟C#的语法略有差别. 1.子类构造器 java会自动在子类的构造器中插入对父类构造器的调用,也就是说在子类可以访问父类之前已经完成了父类的初始化 ...

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

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

随机推荐

热门专题