一、定義和用法
<button> 標簽定義的是一個按鈕
1、在 <button> 元素內部，您可以放置內容，比如文本或圖像。這是該元素與使用 <input> 元素創建的按鈕之間的不同之處；
2、 <button> 控件提供了更為強大的功能和更豐富的內容；
3、<button> 與 </button> 標簽之間的所有內容都是按鈕的內容，其中包括任何可接受的正文內容，比如文本或多媒體內容。
<input> 標簽規定了用戶可以在其中輸入數據的輸入字段
1、<input> 元素在 <form> 元素中使用，用來聲明允許用戶輸入數據的 input 控件；
2、輸入字段可通過多種方式改變，取決於 type 屬性。
二、相同之處
<input> 中 type=“button” 與 <button> 中 type=“button” 是一樣的
<input> 中 type=“submit” 與 <button> 中 type=“submit” 是一樣的
當<button>未處於<form>表單中時，其瀏覽器默認的type就是button，這個時候與input的type=“button”就是一樣的接軌
而當<button>處於<form>表單中時，不同的瀏覽器對 <button> 元素的 type 屬性使用不同的默認值，這個時候有所區分了
三、不同之處
如果在 HTML 表單中使用 button 元素，不設置type的情況下，不同的瀏覽器會提交不同的值。
IE將提交 <button> 與 <button/> 之間的文本；
其他瀏覽器將提交 value 屬性的內容。
例如：我們獲取下他的val
Html：<button id="Btn" value="test">按鈕</button>
JQ：$('#Btn').val() $('#Btn').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 |
按鈕 |
按鈕
|
四、總結
因此，請始終為 <button> 元素規定 type 屬性。因為不同的瀏覽器對 <button> 元素的 type 屬性使用不同的默認值；
如果在 HTML 表單中使用 <button> 元素，不同的瀏覽器可能會提交不同的按鈕值。因此請盡可能使用 <input> 在 HTML 表單中創建按鈕