<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. ReactiveCocoa有关集合类的使用

    Sequences 集合  表示一个不可变的序列值且不能包含空值, 1.实现NSArray的快速遍历 NSArray *numbers = @[@1, @2, @3, @4, @5, @6]; //通 ...

  2. [补档]暑假集训D4总结

    考试 爆零了,不开心,打了两道自己以为是正解的东西,打了两道样例骗分,结果发现并没有给样例分= =,自己以为的正解也打挂了,所以就很= = 但是没办法啊,自己弱也不能怪谁,考试这东西有时候也很玄学. ...

  3. AngularJs学习笔记3-服务及过滤器

    距离上次别博客有有一段时间了,因为最近公司和个人事情比较多,也因为学习新的知识所以耽搁了,也有人说Angularjs1.5没有人用了,没必要分享,我个人感觉既然开头了我就坚持把他写完,对一些还在使用或 ...

  4. 开源蜘蛛集合（转自haizhiguang博客，链接：http://blog.csdn.net/haizhiguang/article/details/20209573）

    各种蜘蛛: Heritrix   点击次数:1458 Heritrix是一个开源,可扩展的web爬虫项目.Heritrix设计成严格按照robots.txt文件的排除指示和META robots标签. ...

  5. java配置mongo最大连接数

    最近做压测,其中有个交易涉及到对mongo的操作. 单机压到1500UV的时候出现如下错误: 一看,原来是mongo配置的最大连接数不够: 我们来看看mongo的官方文档: connectionPer ...

  6. .NET并行计算和并发2-Foreground and Background Threads

    后台线程不会使托管执行环境处于运行状态,除此之外,后台线程与前台线程是一样的. 一旦所有前台线程在托管进程(其中 .exe 文件是托管程序集)中被停止,系统将停止所有后台线程并关闭.

  7. LINUX系统自动化部署shell脚本

    #!/bin/shsudo /etc/init.d/tomcatstopwaitsudo rm -rf /opt/tomcat7/work/*waitsudo rm -rf /opt/tomcat7/ ...

  8. JAVA中的四种引用以及ReferenceQueue和WeakHashMap的使用示例

    简介: 本文主要介绍JAVA中的四种引用: StrongReference(强引用).SoftReferenc(软引用).WeakReferenc(弱引用).PhantomReference(虚引用) ...

  9. python 符合Python风格的对象

    p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 25.0px Helvetica } 对象表示形式 每门面向对象的语言至少都有一种获取对象的字符串表示形式的 ...

  10. PACS发展历史

    最先推动 PACS发展的动力来自于传统的相机厂家.这是因为当数字化浪潮到来的时候,他们首先就意识到这对他们的产品是一个不可逆转的巨大的冲击.他们当然有着自己的优势:对各个厂家的设备连接能力有着最为清楚 ...