html释疑
解析<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 |
按钮 |
按钮 |
2、无意中把<button>标签放到了<form>标签中,你会发现点击这个button变成了提交,相当于<input type="submit"/>
html释疑的更多相关文章
- OpenCV4Android释疑: 透析Android以JNI调OpenCV的三种方式(让OpenCVManager永不困扰)
OpenCV4Android释疑: 透析Android以JNI调OpenCV的三种方式(让OpenCVManager永不困扰) 前文曾详细探讨了关于OpenCV的使用,原本以为天下已太平.但不断有人反 ...
- MySQL参数max_connect_errors分析释疑
最近一MySQL服务器,由于一些特殊因素遇到"ERROR 1129 (00000): Host 'xxx' is blocked because of many connection e ...
- MySQL慢查询日志释疑总结
之前写了一篇"MySQL慢查询日志总结",总结了一些MySQL慢查询日志常用的相关知识,这里总结一下在工作当中遇到关于MySQL慢查询日志的相关细节问题,有些是释疑或自己有疑惑 ...
- SQL Server 2008中的CDC(Change Data Capture)功能使用及释疑
SQL Server 2008中的CDC(Change Data Capture)功能使用及释疑 关键词:CDC 原文:http://www.cnblogs.com/chenxizhang/arc ...
- 读jQuery源码释疑笔记2
本释疑笔记是针对自己在看源码的过程中遇到的一些问题的解答,对大众可能不具有参考性,不过可以看看有没有你也不懂得地方,相互学习,相互进步. 1.函数init <div id="one&q ...
- 读jQuery源码释疑笔记
本释疑笔记是针对自己在看源码的过程中遇到的一些问题的解答,对大众可能不具有参考性,不过可以看看有没有你也不懂得地方,相互学习,相互进步. 1.each的用法 之前对each的用法一直迷迷糊糊,这次终 ...
- content-length与Transfer-Encoding: chunked的问题释疑
http返回头中content-length与Transfer-Encoding: chunked的问题释疑 先说说问题出现的背景: 公司服务器与手机客户端交互,客户端请求一个动态生成的XML文件,在 ...
- C# 访问修饰符internal的访问范围误区释疑
一.前言 MSDN关于访问修饰符的访问级别解释: 访问修饰符是一些关键字,用于指定声明的成员或类型的可访 ...
- eclipse中j2ee(struts2)部署及相关问题释疑
1.eclipse中进行web项目开发时.部署的时候和利用myeclipse部署时有非常大不同,由于在myeclipse的工具栏中有一个部署button.而且在myeclipse的preference ...
- scanf()函数释疑(word找的,没源地址了)
scanf()函数释疑(上) 一.序言 scanf()函数的控制串的使用 例1. #include "stdio.h" int main(void) { int a,b,c; sc ...
随机推荐
- 张艾迪(创始人):发明整个世界+224C个国家
Eidyzhang:发明整个世界+224C个国家 Eidyzhang: Genius.Founder.CEO.23 I 世界级最高级创始人.世界最高级FounderCEO 出生在亚洲中国.Eidyzh ...
- 50 个最棒的 jQuery 日历插件,很齐全了!(转)
http://www.php100.com/html/it/qianduan/2015/0326/8856.html 什么介绍都没有,直接上酸菜! 1. Even Touch Calendar 2. ...
- jQuery+zTree加载树形结构菜单
jQuery+zTree加载树形结构菜单 由于项目中需要设计树形菜单功能,经过一番捣腾之后,终于给弄出来了,所以便记下来,也算是学习zTree的一个总结吧. zTree的介绍: 1.zTree 是利用 ...
- F-Dining Cows(POJ 3671)
Dining Cows Time Limit: 1000MS Memory Limit: 65536K Total Submissions: 7584 Accepted: 3201 Descr ...
- C++构造函数和析构函数调用虚函数时都不会使用动态联编
先看一个例子: #include <iostream> using namespace std; class A{ public: A() { show(); } virtual void ...
- jupyter
Pip install jupyter To run: jupyter notebook 基本操作 执行当前cell,并自动跳到下一个cell:Shift Enter 执行当前cell,执 ...
- CentOS命令登录MySQL时,报错ERROR 1045 (28000):
CentOS命令登录MySQL时,报错ERROR 1045 (28000): Access denied for user root@localhost (using password: NO)错误解 ...
- mybatis中的mapper.xml
<?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE mapper PUBLIC "-/ ...
- Ubuntu用户相关基本命令
Linux是一个用户权限管理得很严格的系统,Ubuntu作为最受欢迎的桌面发行版,提供了简单易用的图形界面工具来管理用户,但是命令行工具往往更强大,用得熟练的话效率会更高.用户管理命令常用的有如下几个 ...
- OpenGL 和OpenGL ES简介
OpenGL的全称是Open Graphics Library,即开放的图形库接口,它定义了一个跨编程语言.跨平台的编程接口的规范,它主要用于三维图形(实际上二维图形也可以)变成.OpenGL的前 ...