你的位置:首页 > 网页设计

[网页设计]input type="button"和button的区别


 <input type="button">和<button>的区别:
标题中的两个标签几乎在外观上没什么区别,在用法上甚至都一样,下面就来介绍一下这两个按钮之间的区别。
区别一:
与<input type="button">相比,<button>标签形式更为丰富,<button>与<tton>之间除了文本之外,还可以是图片或者多媒体内容,不过不能是图像映射,因为它对鼠标和键盘敏感的动作会干扰表单按钮的行为。
区别二:
<button>的type属性一定要规定,否则可能出现一些问题,在IE浏览器中如果不加type就会被当做button按钮处理,但是在谷歌或者火狐等标准浏览器中会被当做提交按钮"submit"按钮处理。
区别三:
关于获取value属性值问题,看一下代码:  
<button value="蚂蚁部落一">蚂蚁部落</button><input type="button" value="蚂蚁部落二">蚂蚁部落</button>

 如果要获取value属性值的话,取值也不一样,在IE7和IE87下浏览器中,获取的<button>的value值是<button>与<tton>之间的内容,而在其他标准浏览器中,则是获取的value属性的值。<input type="button">就是获取它的value属性值的值。
代码实例如下:  
<!DOCTYPE html><html><head><meta charset=" utf-8"><meta name="author" content="http://www.51texiao.cn/" /><title>蚂蚁部落</title> <script type="text/javascript">window.onload=function(){ var first=document.getElementById("first"); var second=document.getElementById("second"); alert(first.value); alert(second.value);}</script><body> <input type="button" value="蚂蚁部落一" id="first" /><button value="蚂蚁部落二" id="second">蚂蚁部落</button></body> </html>

以上代码可以测试在不同浏览器下获取值是取自哪一部分。

原文地址是:http://www.51texiao.cn/HTML5jiaocheng/2015/0521/2132.html