<button>和<input type="button"> 的区别
定义和用法
<button> 标签定义一个按钮。
在 button 元素内部,您可以放置内容,比如文本或图像。这是该元素与使用 input 元素创建的按钮之间的不同之处。
<button> 控件 与 <input
type="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 |
按钮 |
按钮 |
验证这一点可以在测试下面的代码
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="jquery-1.4.4.min.js"></script>
<script type="text/javascript">
$(function() {
$('#test1').click(function() {
alert($('#customBtn').attr('value'));
});
$('#test2').click(function() {
alert($('#customBtn').val());
});
});
</script>
</head>
<body>
<button id="customBtn" value="test">按钮</button>
<input type="button" id="test1" value="get attr"/>
<input type="button" id="test2" value="get val"/>
</body>
</html>
2、无意中把<button>标签放到了<form>标签中,你会发现点击这个button变成了提交,相当于<input
type="submit"/>
这一点参见上面第二句标红的话就明白什么意思了。
不要把<button>标签当成<form>中的input元素。
验证这一点可以在测试下面的代码
<html>
<body>
<form action="">
<button> button </button>
<input type="submit" value="input submit"/>
<input type="button" value="input button"/>
</form>
</body>
</html>
<button>和<input type="button"> 的区别的更多相关文章
- <input type="button" /> 和<input type="submit" /> 的区别
<input type="button" /> 这就是一个按钮.如果你不写javascript 的话,按下去什么也不会发生.<input type="s ...
- ASP.NET控件<ASP:Button /> html控件<input type="button">区别联系
ASP.NET控件<ASP:Button />-------html控件<input type="button">杨中科是这么说的:asp和input是一样 ...
- <button>与<input type="button">的区别
一.定义和用法 <button> 标签定义的是一个按钮. 在 button 元素内部,可以放置文本或图像.这是<button>与使用 input 元素创建的按钮的不同之处. 二 ...
- 解析button和input type=”button”的区别
一.定义和用法 <button> 标签定义的是一个按钮. 在 button 元素内部,可以放置文本或图像.这是<button>与使用 input 元素创建的按钮的不同之处. 二 ...
- 【转】解析<button>和<input type="button"> 的区别
一.定义和用法 <button> 标签定义的是一个按钮. 在 button 元素内部,可以放置文本或图像.这是<button>与使用 input 元素创建的按钮的不同之处. 二 ...
- 了解HTML表单之input元素的23种type类型
目录 传统类型 text password file radio checkbox hidden button image reset submit 新增类型 color tel email url ...
- HTML(七)HTML 表单(form元素介绍,input元素的常用type类型,input元素的常用属性)
前言 表单是网页与用户的交互工具,由一个<form>元素作为容器构成,封装其他任何数量的表单控件,还有其他任何<body>元素里可用的标签 表单能够包含<input> ...
- HTML表单之input元素的23种type类型
摘自:http://www.cnblogs.com/xiaohuochai/p/5179909.html 了解HTML表单之input元素的23种type类型 随着HTML5的出现,input元素新增 ...
- HTML中button和input button的区别
button和input button的区别 一句话概括主题:<button>具有<input type="button" ... >相同的作用但是在可操控 ...
随机推荐
- 最实用的APP界面设计知识,有温度的APP设计(转)
在逛简书的时候,无意之间看到了这样的一篇非常有意思的app设计博文.顾25学堂的摘录了其中的一些关于移动端APP界面设计的精华.分享给25学堂的app设计师们. 当然,下面的这些app设计知识点是来自 ...
- [Liferay6.2]Liferay Dynamic Query API示例
介绍 Liferay提供了几种方法定义复杂的查询用来检索数据库中的数据. 通常情况下,在每个service Entity中,通过定义一些'finder'方法,可以便捷地满足基本的数据查询操作. 但是, ...
- Sql Server 基础知识
Sql Server 基础知识: http://blog.csdn.net/t6786780/article/details/4525652 Sql Server 语句大全: http://www.c ...
- Codeforces Round #276 (Div. 1) E. Sign on Fence 二分+主席树
E. Sign on Fence Bizon the Champion has recently finished painting his wood fence. The fence consi ...
- 封装JavaScript的AJAX
// 创建request对象 function createXMLHttpRequest() { try { return new XMLHttpRequest();//大多数浏览器 } catch ...
- C#经典机试题(猫叫)
猫大叫一声,所有的老鼠都开始逃跑,主人被惊醒.(C#语言) 1.要有联动性,老鼠和主人的行为是被动的. 2.考虑可扩展性,猫的叫声可能引起其他联动效应. public interface Observ ...
- poj1328 贪心
http://http://poj.org/problem?id=1328 神TM贪心. 不懂请自行搜博客. AC代码: #include<cstdio> #include<algo ...
- CSS3设置多张背景图片
background-image:url("1.jpg"),url("2.jpg"),url("3.jpg");background-rep ...
- 将公司的主要项目从eclipse迁移到android studio for mac环境(1)
上星期,我决定要解决这个问题.理由如下: 3个月之前,我已经投入一段时间要做好这个迁移工作,直到最后,我发现能够安装了,但是运行不了,这个过程也看不到bugly上传,在找不到原因的情况下,我放弃了. ...
- Shell 编程基础之 Break, Continue 练习
一.语法 break:用来跳出循环.break N 可以跳出多层循环 break break N continue:用来跳过循环.continue N 可以跳过多层循环 continue contin ...