一、定义和用法

<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

按钮

按钮

验证这一点可以在测试下面的代码

  1. <html>
  2. <head>
  3. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  4. <script type="text/javascript" src="jquery-1.4.4.min.js"></script>
  5. <script type="text/javascript">
  6. $(function() {
  7. $('#test1').click(function() {
  8. alert($('#customBtn').attr('value'));
  9. });
  10. $('#test2').click(function() {
  11. alert($('#customBtn').val());
  12. });
  13. });
  14. </script>
  15. </head>
  16. <body>
  17. <button id="customBtn" value="test">按钮</button>
  18. <input type="button" id="test1" value="get attr"/>
  19. <input type="button" id="test2" value="get val"/>
  20. </body>
  21. </html>

2、无意中把<button>标签放到了<form>标签中，你会发现点击这个button变成了提交，相当于<input type="submit"/>

这一点参见上面第二句标红的话就明白什么意思了。

不要把<button>标签当成<form>中的input元素。

验证这一点可以在测试下面的代码

  1. <html>
  2. <body>
  3. <form action="">
  4. <button> button </button>
  5. <input type="submit" value="input submit"/>
  6. <input type="button" value="input button"/>
  7. </form>
  8. </body>
  9. </html>

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

  1. <select>与<datalist>的区别

    size:下拉框中每次出现选项的个数 multiple:可以一次性选多个选项: disabled:时下拉框不可用,无法点击选项​ list:它的值应于id的值对应 datalist要与input标签一 ...

  2. [转]ThinkPHP中实例化对象M()和D()的区别，select和find的区别

    1.ThinkPHP中实例化对象M()和D()的区别 在实例化的过程中,经常使用D方法和M方法,这两个方法的区别在于M方法实例化模型无需用户为每个数据表定义模型类,如果D方法没有找到定义的模型类,则会 ...

  3. JS-005-常见下拉列表 Select 和 datalist

    下拉列表在我们日常的网页浏览的过程中,随处可见,是 web 编程过程中大家非常熟悉的一个页面元素,随着 HTML 语言的日益强大,其在广大攻城狮的手中可谓是千变万化,有了很多不同的实现方式.本文主要以 ...

  4. ThinkPHP中实例化对象M()和D()的区别，select和find的区别

    原文:ThinkPHP中实例化对象M()和D()的区别,select和find的区别 1.ThinkPHP中实例化对象M()和D()的区别 在实例化的过程中,经常使用D方法和M方法,这两个方法的区别在 ...

  5. Select()和SelectMany()的区别

    Select与SelectMany的区别 Select() 和 SelectMany() 的工作都是依据源值生成一个或多个结果值. Select() 为每个源值生成一个结果值.因此,总体结果是一个与源 ...

  6. select 和epoll模型区别

    1.select 和epoll模型区别 1.1.网络IO模型概述 通常来说,网络IO可以抽象成用户态和内核态之间的数据交换.一次网络数据读取操作(read),可以拆分成两个步骤:1)网卡驱动等待数据准 ...

  7. python下的select模块使用 以及epoll与select、poll的区别

    python下的select模块使用 以及epoll与select.poll的区别 先说epoll与select.poll的区别(总结) 整理http://www.zhihu.com/question ...

  8. SQL中select与set的区别-转载

    下表列出 SET 与 SELECT 的区别   SELECT SET 同时对多个变量同时赋值时 支持 不支持 表达式返回多个值时 将返回的最后一个值赋给变量 出错 表达式未返回值时 变量保持原值 变量 ...

  9. select count(*)和select count(1)的区别 （转）

    A 一般情况下,Select Count (*)和Select Count(1)两着返回结果是一样的 假如表沒有主键(Primary key), 那么count(1)比count(*)快, 如果有主键 ...

  10. Select与SelectMany的区别

    Select() 和 SelectMany() 的工作都是依据源值生成一个或多个结果值. Select() 为每个源值生成一个结果值.因此,总体结果是一个与源集合具有相同元素数目的集合.与之相反,Se ...

随机推荐

  1. 在IIS使用localDB

    项目使用localdb来作为本机测试数据库,发布到本机IIS后项目却链接不到数据库,查看windows日志为如下错误 "无法获取本地应用程序数据路径.很可能是因为未加载用户配置文件.如果在 ...

  2. Java---hashCode()和equals()

    1.hashCode()和equals() API hashCode()和equals()都来自上帝类Object, 所有的类都会拥有这两个方法,特定时,复写它们. 它们是用来在同一类中做比较用的,尤 ...

  3. python的range()函数

    range函数的三种用法:>>> range(1,5) # 代表从1到5(不包含5) [1, 2, 3, 4] >>> range(1,5,2) # 代表从1到5, ...

  4. python 列表赋值和列表 sort 方法注意的问题

    列表赋值 >>> a = b = [] >>> a.append() >>> a [] >>> b [] >>> ...

  5. Python入门-数据类型

    一.变量 1)变量定义 name = 100(name是变量名 = 号是赋值号100是变量的值) 2)变量赋值 直接赋值 a=1 链式赋值  a=b=c=1 序列解包赋值  a,b,c = 1,2,3 ...

  6. TurnipBit—MicroPython开发板：妥妥拽拽零基础也能玩编程

    可视化编程网站入口:www.turnipbit.com 说到编程.谈到硬件,你也许会想到屌丝逆袭女神的"传奇"故事,也许会浮现出带着眼镜.头发稀少.无精打采的程序猿形象." ...

  7. win8使用putty登录虚拟机linux

    从下午两点开始在尝试,差不多用了6个小时候到现在终于成功了! 连接器使用的是putty,只要知道虚拟机的ip地址就可以尝试连接,所以首先查询虚拟机上的ip地址,使用命令: ifconfig 出现提示: ...

  8. 【转载】Linux下的IO监控与分析

    近期要在公司内部做个Linux IO方面的培训, 整理下手头的资料给大家分享下 各种IO监视工具在Linux IO 体系结构中的位置 源自 Linux Performance and Tuning G ...

  9. 用JAVA写一个冒泡排序

    一:实现思想: 基本思想:在要排序的一组数中,对当前还未排好序的范围内的全部数,自上而下对相邻的两个数依次进行比较和调整,让较大的数往下沉,较小的往上冒.即:每当两相邻的数比较后发现它们的排序与排序要 ...

  10. git 删除分支操作

    删除分支时自己不能够在要删除的分支上 删除本地的某个分支 git branch -d branchname # 交互式删除分支 git branch -D branchname # 强制删除分支 删除 ...