button和input type=button的差别及留意事项

<button>标识
界定和用法
<button>标识界定1个按钮。
在button元素內部,您能够置放內容,例如文字或图象。这是该元素与应用input元素建立的按钮之间的不一样的地方。
<button>控制与<inputtype="button">相比,出示了更加强劲的作用和更丰富多彩的內容。<button>与</button>标识之间的全部內容全是按钮的內容,在其中包含任何可接纳的文章正文內容,例如文字或多新闻媒体內容。比如,大家能够在按钮中包含1个图象和有关的文字,用它们在按钮中建立1个吸引住人的标识图象。
唯1严禁应用的元素是图象投射,由于它对电脑鼠标和电脑键盘比较敏感的姿势会影响表单按钮的个人行为。
请自始至终为按钮要求type特性。InternetExplorer的默认设置种类是"button",而别的访问器中(包含W3C标准)的默认设置值是"submit"。
访问器适用
全部流行访问器都适用<button>标识。
关键事项:假如在HTML表单中应用button元素,不一样的访问器会递交不一样的值。InternetExplorer将递交<button>与<button/>之间的文字,而别的访问器将递交value特性的內容。请在HTML表单中应用input元向来建立按钮。
留意事项
在应用<button>标识时很非常容易想自然确当成<inputtype="button">应用,这很非常容易造成下列几点不正确用法:
1、根据$('#customBtn').val()获得<buttonid="customBtn"value="test">按钮</button>value的值
在IE(IE核心)下这样用到得的是值是“按钮”,而并不是“test”,非IE下获得的是“test”。报名参加上面标红的第1句话。
这1点要和<inputtype="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

按钮

按钮


认证这1点能够在检测下面的编码

拷贝编码
编码以下:

<html>
<head>
<metahttp-equiv="Content-Type"content="text/html;charset=utf⑻"/>
<scripttype="text/javascript"src="jquery⑴.4.4.min.js"></script>
<scripttype="text/javascript">
$(function(){
$('#test1').click(function(){
alert($('#customBtn').attr('value'));
});
$('#test2').click(function(){
alert($('#customBtn').val());
});
});
</script>
</head>
<body>
<buttonid="customBtn"value="test">&#x6309;&#x94AE;</button>
<inputtype="button"id="test1"value="getattr"/>
<inputtype="button"id="test2"value="getval"/>
</body>
</html>

2、不经意中把<button>标识放到了<form>标识中,你会发现点一下这个button变为了递交,非常于<inputtype="submit"/>
这1点参照上面第2句标红的话就搞清楚甚么意思了。
不必把<button>标识当做<form>中的input元素。
认证这1点能够在检测下面的编码

拷贝编码
编码以下:

<html>
<body>
<formaction="">
<button>button</button>
<inputtype="submit"value="inputsubmit"/>
<inputtype="button"value="inputbutton"/>
</form>
</body>
</html>