<input type="button">和<button>的區別

admin發表於2017-02-03
標題中的兩個標籤幾乎在外觀上沒什麼區別，在用法上甚至都一樣，下面就來介紹一下這兩個按鈕之間的區別。

區別一:

與<input type="button">相比，<button>標籤形式更為豐富，<button>與</button>之間除了文字之外，還可以是圖片或者多媒體內容，不過不能是影像對映，因為它對滑鼠和鍵盤敏感的動作會干擾表單按鈕的行為。

區別二:

<button>的type屬性一定要規定，否則可能出現一些問題，在IE瀏覽器中如果不加type就會被當做button按鈕處理，但是在谷歌或者火狐等標準瀏覽器中會被當做提交按鈕"submit"按鈕處理。

區別三:

關於獲取value屬性值問題，看一下程式碼:

[HTML] 純文字檢視 複製程式碼
<button value="螞蟻部落一">螞蟻部落</button>
<input type="button" value="螞蟻部落二">螞蟻部落</button>

如果要獲取value屬性值的話，取值也不一樣，在IE7和IE87下瀏覽器中，獲取的<button>的value值是<button>與</button>之間的內容，而在其他標準瀏覽器中，則是獲取的value屬性的值。<input type="button">就是獲取它的value屬性值的值。

程式碼例項如下:

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" /> 
<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>

以上程式碼可以測試在不同瀏覽器下獲取值是取自哪一部分。

相關文章