botton与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"/>
不要把<button>标签当成<form>中的input元素。
转载于:https://www.cnblogs.com/CrisZjie180228/p/8538499.html
botton与input type=button的区别相关推荐
- HTML button 和 input type=“button”的区别 / input type=submit 和button的区别
HTML <button> 和 input type="button"的区别: 1. <button>标签里可以放文本图片等内容,与<input> ...
- button 与 input type=button 的区别【2012/07/23】
<button>标签定义按钮.其内部可以放置内容(文本或者图像),这也是它与input创建按钮的不同之处. <button> 控件 与 <input type=" ...
- 解析button和input type=”button”的区别
一.定义和用法 <button> 标签定义的是一个按钮. 在 button 元素内部,可以放置文本或图像.这是<button>与使用 input 元素创建的按钮的不同之处. 二 ...
- 解析button和input type=button 的区别
一.定义和用法 <button> 标签定义的是一个按钮. 在 button 元素内部,可以放置文本或图像.这是<button>与使用 input 元素创建的按钮的不同之处. 二 ...
- HTMLbutton 标签和input type=button的区别
<button>标签的定义及用法 w3school的解释: <button> 标签定义一个按钮. 在 button 元素内部,您可以放置内容,比如文本或图像.这是该元素与使用 ...
- button与input type=button 的区别
一.定义和用法 <button> 标签定义的是一个按钮. 在 button 元素内部,可以放置文本或图像.这是<button>与使用 input 元素创建的按钮的不同之处. 二 ...
- input type=button与asp:button的区别,以及runat=server的作用
<input type="button">与<asp:button>的区别,以及runat="server"的作用 在<input ...
- <input type = “button“>和<button></button>的区别
<p id="demo">单击按钮创建button元素</p><button onclick="myFunction()" val ...
- input type=button和asp:Button的区别
参考 https://www.cnblogs.com/fengwei0813/p/5574385.html https://bbs.csdn.net/topics/110186772 < inp ...
最新文章
- 13 Java程序员面试宝典视频课程之容器
- 智源论坛 | 智能处理器探索(3月21日)
- 【并查集】团伙(luogu 1892)
- 一步步分析-C语言如何面向对象编程
- STM32-----找个搬砖的搬数据
- java 获取http地址_java如何获取当前时间,java如何获取ip地址
- hervorgehen ( aus ... )
- linux调度器(九)——调度器的配置参数
- Qt_qDebug 原理详解
- LQR 控制学习-LQR控制 MATLAB官方教程-LQR 控制器_状态空间系统Matlab/Simulink建模分析
- 做项目的一些思路(针对小白)
- 关于cookie的详细讲解
- 基于ssm小说阅读安卓APP项目
- AcWing 838.堆排序
- 我们“看到”的物联网,未来真正走向领域是这些方面....
- python class namedtuple 效率_菜鸟世界 -python进阶之 namedtuple
- 绿色软件下么——简单两步实现win 7上网自动拨号
- mimo 雷达成像 matlab,MIMO雷达成像算法研究
- 开源ERP软件Odoo提速指南
- 手机网站支付宝接入iframe无法唤醒支付宝app