<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. [译] 所有你需要知道的关于完全理解 Node.js 事件循环及其度量

    原文地址:All you need to know to really understand the Node.js Event Loop and its Metrics 原文作者:Daniel Kh ...

  2. Samba服务部署

    Samba,是种用来让UNIX系列的操作系统与微软Windows操作系统的SMB/CIFS(Server Message Block/Common Internet File System)网络协议做 ...

  3. 关于laravel 得手动分页问题

    一般得分页,我们只需要使用paginate方法,就可以简单得搞定.但是遇到数组得组合情况呢?这个时候,就需要我们使用自定义分页了.首先我们看下laravel得分页方法源码: #vendor/larav ...

  4. kickstart自动化安装--tftp+nfs+dhcp

    使用kickstart实现Centos 自动化安装 Kickstart自动化安装简介: 规模化:同时装配多台 服务器 自动化 :安装系统,配置各种服务 远程实现:不需要光盘,U盘等安装介质 优势: ( ...

  5. 前端开发工具Brackets介绍，安装及安装Emme插件时踩过的坑

    对于前端开发的园友来说有可能IDE工具有很多,层次不穷,还有每个人的喜好及习惯也不一样,因为我是一名后端开发的.Net程序员,但是大家都知道,现在都提倡什么全栈工程师,所以也得会点前端开发,所以我对于 ...

  6. Hadoop 之 NameNode 元数据原理

    在对NameNode节点进行格式化时,调用了FSImage的saveFSImage()方法和FSEditLog.createEditLogFile()存储当前的元数据.Namenode主要维护两个文件 ...

  7. RobotFramework自动化测试框架-移动手机自动化测试AppiumLibrary介绍

    在使用AppiumLibrary库时,需要预先安装好Appium自动化工具,Appium官网地址为:http://appium.io/ Appium的GitHub地址为:https://github. ...

  8. ES6新特性之生成器函数 (generator function): function*

    一.什么是生成器函数(generator function)? 生成器函数是ES6的新特性之一,它是一个在执行时能中途暂时退出,后面重新调用又能重新进入继续执行的一种函数. 并且在函数内定义的变量的所 ...

  9. Lenovo T440p 外放没有声音

    背景:Lenovo T440p,今天突然想听会歌 外放竟然没声音,fuck!!! 任务栏声音图标也没有静音标志. 驱动出问题了?检查下驱动,正常. 找了耳机试下,正常,看来驱动真的没问题. 喇叭坏了? ...

  10. DataGuard实战1

    DataGuard实战1 -------------------------------------------2013/10/27   一.Primary数据库的配置及操作 1. 确定主库处于归档日 ...