<button>标签 
浏览器支持 
所有主流浏览器都支持<button>标签。 
重要事项：如果在HTML表单中使用button元素，不同的浏览器会提交不同的值。IE将提交<button>与<button/>之间的文本，而其他浏览器将提交value属性的内容。请在HTML表单中使用input元素来创建按钮。 
注意事项 
在使用<button>标签时很容易想当然的当成<input type="button">使用，这很容易产生以下几点错误用法： 
1、通过$('#customBtn').val()获取<buttonid="customBtn"value="test">按钮</button>value的值 
在IE(IE内核)下这样用到得的是值是“按钮”，而不是“test”，非IE下得到的是“test”。参加上面标红的第一句话。 
这一点要和<inputtype="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>
    <metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/>
    <scripttype="text/javascript"src="jquery-1.4.4.min.js"></script>
    <scripttype="text/javascript">
        $(function(){
            $('#test1').click(function(){
                alert($('#customBtn').attr('value'));
            });
            $('#test2').click(function(){
                alert($('#customBtn').val());
            });
        });
    </script>
</head>
<body>
<buttonid="customBtn"value="test">按钮</button>
<inputtype="button"id="test1"value="getattr"/>
<inputtype="button"id="test2"value="getval"/>
</body>
</html>
2、无意中把<button>标签放到了<form>标签中，你会发现点击这个button变成了提交，相当于<input type="submit"/> 
不要把<button>标签当成<form>中的input元素。 
验证这一点可以在测试下面的代码 
复制代码
<form action="">
<button>button</button>
<inputtype="submit"value="inputsubmit"/>
<inputtype="button"value="inputbutton"/>
</form>

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

  1. input type="submit" 和"button"有什么区别？

    http://www.zhihu.com/question/20839977 在一个页面上画一个按钮,有四种办法: <input type="button" /> 这就 ...

  2. 网站开发进阶(四十四)input type="submit" 和"button"的区别

    网站开发进阶(四十四)input type="submit" 和"button"的区别   在一个页面上画一个按钮,有四种办法: 这就是一个按钮.如果你不写ja ...

  3. <input type="image"> 和 <img> 用法区别

    原文:<input type="image"> 和 <img> 用法区别 w3c定义如下: Image <input type="image ...

  4. input type="submit" 和"button"有什么区别

    HTML中<input type="submit" /> 和 <input type="button" /> 主要从元素定义类型.点击触 ...

  5. <input type="text">和<textarea>的区别

    在我们开发时经常需要用到输入框,通常解决办法就是<input type="text">和<textarea>,那么这两个标签有什么区别呢?  一:<i ...

  6. HTML <input type="file">上传文件——结合asp.net的一个文件上传示例

    HTML的代码:(关键是要在form里设置enctype="multipart/form-data",这样才能在提交表单时,将文件以二进制流的形式传输到服务器) 一. <fo ...

  7. ASP.NET控件<ASP:Button /> html控件<input type="button">区别联系

    ASP.NET控件<ASP:Button />-------html控件<input type="button">杨中科是这么说的:asp和input是一样 ...

  8. button与input[type=”button”]的区别

    button与input[type="button"]的区别 特别感谢 @守护晴天 ,指出了博客中不细致不严谨的地方,也让我学到了更多,更多是觉得抱歉,由于自己的不细致可能误导了一 ...

  9. button,input type=button按钮在IE和w3c，firefox浏览器区别

    在项目中遇到一个问题,是关于点击button按钮会自动刷新的问题.查阅了资料,做以下的整理: button,input type=button按钮在IE和w3c,firefox浏览器区别如下:当在IE ...

  10. 关于<button> 没写 type='button' 导致点击时提交以及<button>和<input type="button">的区别

    这是我的第一篇博客,如果写的不好,请见谅 这是一个关于button按钮一个小问题 最近刚开学跟着老师一起写代码,在模仿JAVA web程序设计(慕课版) P61页第三章 Ajax处理XML的代码中发现 ...

随机推荐

  1. 实例化bean

    从bean.xml中<bean>标签内容可以看出bean其实是一个管理对象的东西,我们只需要修改xml配置文件,就可以改变对象之间的依赖关系,不需要去修改任何源代码.我觉得学习好sprin ...

  2. Android studio导出AAR包问题整理。

    最近因为项目需求开始整理一个SDK 以AAR的方式提供出去.在整理的过程中遇到了很多坑. 以下是一些总结希望能帮助遇到同样问题的人. 1.怎么导出AAR,这种文章太多了,我贴一个大家可以做参考. ht ...

  3. webIDE 第二篇博文

    这是我做webIDE过程中的第二篇博文,之所以隔了这么长时间没更,因为确实是没有啥进度啊,没什么可写的,现在虽然依然没啥进度,但中途遇到很多坑,这些坑还是有记录下来的必要的. 因个人水平问题,可能有的 ...

  4. 深搜（DFS）广搜（BFS）详解

    图的深搜与广搜 一.介绍: p { margin-bottom: 0.25cm; direction: ltr; line-height: 120%; text-align: justify; orp ...

  5. 奇怪的道路[JXOI2012]

    题目描述 小宇从历史书上了解到一个古老的文明.这个文明在各个方面高度发达,交通方面也不例外.考古学家已经知道,这个文明在全盛时期有n座城市,编号为1..n.m条道路连接在这些城市之间,每条道路将两个城 ...

  6. struts2增删改查---layer---iframe层---通配符---国际化

    在前一篇文章的基础上,修改一部分即可(在此只是简单介绍) struts.xml页面 在原来的基础之上 action的name="*_*"  class="包名.{1}&q ...

  7. ios 加密

    0728 加密 MD5加密 可解 因为有MD5库 但是可以通过 加盐(也就是拼接字符串  在进行加密)的方法进行加密这样在解得时候就不会那么容易 也可以使用时间戳 进行加盐 加密 时间戳 可只用到分钟 ...

  8. 【NO.2】Jmeter-安装Jmeter - 在Linux环境安装Jmeter - 在Windows环境安装Jmeter

    当配置完Jmeter运行的环境之后,就可以开始安装Jmeter了. 为什么既要告诉各位＂在Linux系统内安装Jmeter＂,又要告诉各位＂在Windows系统内安装Jmeter＂?因为当我们在构建1 ...

  9. hibernate中对象的3种状态----瞬时态、持久态、脱管态

    Hibernate的对象有3种状态,分别为:瞬时态(Transient). 持久态(Persistent).脱管态(Detached).处于持久态的对象也称为PO(Persistence Object ...

  10. redis（1）

    什么是nosql 非关系型数据库 为什么要用nosql web2.0大规模动态网站的兴起 high performance ,高并发读写,动态页面展示与交互,比如微博点赞评论等操作,实时统计在线人数排 ...