<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. Ajax 基本使用的四大步骤，简单易懂

    ajax(异步javascript xml) 能够刷新局部网页数据而不是重新加载整个网页.接下来通过本文给大家介绍Ajax的使用四大步骤,非常不错,感兴趣的朋友看下吧 什么是ajax? ajax(异步 ...

  2. C#多线程之旅(7)——终止线程

    先交代下背景,写<C#多线程之旅>这个系列文章主要是因为以下几个原因:1.多线程在C/S和B/S架构中用得是非常多的;2.而且多线程的使用是非常复杂的,如果没有用好,容易造成很多问题.   ...

  3. 基于vs2012的opencv开发环境搭建

    前些日子有个需求,大概描述,实时检测一副动态图每一帧画面上全部的圆形内容,并得到全部圆形的圆心相对坐标以及半径.当时的思路是用Matlab写一个相关图像处理的插件,然后给C#调用.当时没立马动手的原因 ...

  4. storm从入门到放弃(三)，放弃使用《StreamId》特性。

    序:StreamId是storm中实现DAG有向无环图的重要一个特性,但是从实际生产环境来看,这个功能其实蛮影响生产环境的稳定性的,我们系统在迭代时会带来整体服务的不可用. StreamId是stor ...

  5. JAVA多线程之Synchronized关键字--对象锁的特点

    一,介绍 本文介绍JAVA多线程中的synchronized关键字作为对象锁的一些知识点. 所谓对象锁,就是就是synchronized 给某个对象 加锁.关于 对象锁 可参考:这篇文章 二,分析 s ...

  6. POJ2236 Wireless Network 并查集简单应用

    Description An earthquake takes place in Southeast Asia. The ACM (Asia Cooperated Medical team) have ...

  7. AndroidTv开发中常用的adb命令

    盒子应用开发时,调试比手机上的开发比较麻烦一点,而且需要经常跟 adb 打交道,不管是 wifi 连接调试,还是应用删除安装等.这里记录一些常用的操作,方便查阅. adb wifi连接调试 方法一:需 ...

  8. mybatis 详解（五）------动态SQL

    前面几篇博客我们通过实例讲解了用mybatis对一张表进行的CRUD操作,但是我们发现写的 SQL 语句都比较简单,如果有比较复杂的业务,我们需要写复杂的 SQL 语句,往往需要拼接,而拼接 SQL ...

  9. coder该何去何从

    无论是什么语言的学习,都不是一帆风顺的,如今随着编程大军的壮大,工作越来越难找,各位coder已经把中心偏移到了学历上面,导致技术水平的参差不齐,以及虚假学历的泛滥,这样的恶性循环下,不知前路在何方?

  10. 迷宫 洛谷 p1605

    题目背景 迷宫 [问题描述] 给定一个N*M方格的迷宫,迷宫里有T处障碍,障碍处不可通过.给定起点坐标和 终点坐标,问: 每个方格最多经过1次,有多少种从起点坐标到终点坐标的方案.在迷宫 中移动有上下 ...