<button>与<input type="button">的区别

一、定义和用法

<button> 标签定义的是一个按钮。

在 button 元素内部，可以放置文本或图像。这是<button>与使用 input 元素创建的按钮的不同之处。

二者相比较， <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">的区别的更多相关文章

<select>与<datalist>的区别
size:下拉框中每次出现选项的个数 multiple:可以一次性选多个选项: disabled:时下拉框不可用,无法点击选项 list:它的值应于id的值对应 datalist要与input标签一 ...
[转]ThinkPHP中实例化对象M()和D()的区别，select和find的区别
1.ThinkPHP中实例化对象M()和D()的区别在实例化的过程中,经常使用D方法和M方法,这两个方法的区别在于M方法实例化模型无需用户为每个数据表定义模型类,如果D方法没有找到定义的模型类,则会 ...
JS-005-常见下拉列表 Select 和 datalist
下拉列表在我们日常的网页浏览的过程中,随处可见,是 web 编程过程中大家非常熟悉的一个页面元素,随着 HTML 语言的日益强大,其在广大攻城狮的手中可谓是千变万化,有了很多不同的实现方式.本文主要以 ...
ThinkPHP中实例化对象M()和D()的区别，select和find的区别
原文:ThinkPHP中实例化对象M()和D()的区别,select和find的区别 1.ThinkPHP中实例化对象M()和D()的区别在实例化的过程中,经常使用D方法和M方法,这两个方法的区别在 ...
Select()和SelectMany()的区别
Select与SelectMany的区别 Select() 和 SelectMany() 的工作都是依据源值生成一个或多个结果值. Select() 为每个源值生成一个结果值.因此,总体结果是一个与源 ...
select 和epoll模型区别
1.select 和epoll模型区别 1.1.网络IO模型概述通常来说,网络IO可以抽象成用户态和内核态之间的数据交换.一次网络数据读取操作(read),可以拆分成两个步骤:1)网卡驱动等待数据准 ...
python下的select模块使用以及epoll与select、poll的区别
python下的select模块使用以及epoll与select.poll的区别先说epoll与select.poll的区别(总结) 整理http://www.zhihu.com/question ...
SQL中select与set的区别-转载
下表列出 SET 与 SELECT 的区别 SELECT SET 同时对多个变量同时赋值时支持不支持表达式返回多个值时将返回的最后一个值赋给变量出错表达式未返回值时变量保持原值变量 ...
select count(*)和select count(1)的区别（转）
A 一般情况下,Select Count (*)和Select Count(1)两着返回结果是一样的假如表沒有主键(Primary key), 那么count(1)比count(*)快, 如果有主键 ...
Select与SelectMany的区别
Select() 和 SelectMany() 的工作都是依据源值生成一个或多个结果值. Select() 为每个源值生成一个结果值.因此,总体结果是一个与源集合具有相同元素数目的集合.与之相反,Se ...

随机推荐

C# DataGridView 的UserDeletingRow事件，删除
DialogResult dr = MessageBox.Show("确认删除记录吗?", "提示", MessageBoxButtons.YesNo); ...
lambda 与内置函数，以及一些补充
插播几条小知识: 1. lambda 表达式对于简单的函数,我们可以用 lamdba 表达式来执行,一句话就够用
ASP.NET Core学习之二菜鸟踩坑
对于像我这样没接触过core的人,坑还是比较多的,一些基础配置和以前差别很大,这里做下记录一.Startup 1.注册服务 // This method gets called by the run ...
Python面向对象篇（1）-类和对象
面向对象编程 1.编程范式我们写代码的目的是什么?就是为了能够让计算机识别我们所写的代码并完成我们的需求,规范点说,就是通过编程,用特定的语法+数据结构+特殊算法来让计算机执行特定的功能,实现一 ...
Qt用Zip压缩文件夹的一些坑
环境: QT3.3.8 vs2005 QDir dir("/home/Blinux/html"); if ( !dir.exists() ) { //目录不存在 } QString ...
文字太多？控件太小？试试 TextView 的新特性 Autosizeing 吧！
Hi,大家好,我是承香墨影! Android 8.0 已经发布了有一阵子了,如果你有在关注它,你应该会知道它新增了一个对于 TextView 字体大小变动的新特性:Autosizing. 本身这个新特 ...
Javascript中遍历数组方法的性能对比
Javascript中常见的遍历数组的方法 1.for循环 for(var i = 0; i < arr.length; i++) { // do something. } 2.for循环的改进 ...
[原创]Nginx反向代理及负载均衡
1.基本命令 # 启动nginx start nginx.exe # windowsnginx -c /usr/local/nginx/conf/nginx.conf # Linux# 优雅的停止ng ...
uboot中 make xxx_config 的作用（以make smdk2410_config为例）
1.创建到目标板相关文件的链接 ln -s asm-arm asm ln -s arch-s3c24x0 asm-arm/arch ln -s proc-armv asm-arm/proc 2.创建i ...
Zabbix实战-简易教程（3）--DB安装和表分区
一.DB安装环境主机角色主机IP VIP 操作系统版本软件版本 DB Master A 192.168.1.97 (主从) CentOS 6.5 64bit mysql-5.6.21 DB Sl ...

<button>与<input type="button">的区别

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

随机推荐

热门专题