input[type="button"]與的區別

時間 2019-11-16

標籤 input type button 區別简体版

原文原文鏈接

<button>標籤

瀏覽器支持

全部主流瀏覽器都支持<button>標籤。

重要事項：若是在HTML表單中使用button元素，不一樣的瀏覽器會提交不一樣的值。IE將提交<button>與<button/>之間的文本，而其餘瀏覽器將提交value屬性的內容。請在HTML表單中使用input元素來建立按鈕。

注意事項

在使用<button>標籤時很容易想固然的當成<input type="button">使用，這很容易產生如下幾點錯誤用法：

一、經過$('#customBtn').val()獲取<buttonid="customBtn"value="test">按鈕</button>value的值

在IE(IE內核)下這樣用到得的是值是「按鈕」，而不是「test」，非IE下獲得的是「test」。參加上面標紅的第一句話。

這一點要和<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	按鈕	按鈕

驗證這一點能夠在測試下面的代碼

<html>
<head>
    <metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/>
    <scripttype="text/javascript"src="jquery-1.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>

二、無心中把<button>標籤放到了<form>標籤中，你會發現點擊這個button變成了提交，至關於<input type="submit"/>

不要把<button>標籤當成<form>中的input元素。

驗證這一點能夠在測試下面的代碼

複製代碼

<form action=""><button>button</button><inputtype="submit"value="inputsubmit"/><inputtype="button"value="inputbutton"/></form>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。