Html-button和input的區別

1、定義和用法

<button> 標籤訂義的是一個按鈕

    一、在 <button> 元素內部，您能夠放置內容，好比文本或圖像。這是該元素與使用 <input> 元素建立的按鈕之間的不一樣之處；

    二、 <button> 控件提供了更爲強大的功能和更豐富的內容；

    三、<button> 與 </button> 標籤之間的全部內容都是按鈕的內容，其中包括任何可接受的正文內容，好比文本或多媒體內容。

<input> 標籤規定了用戶能夠在其中輸入數據的輸入字段

    一、<input> 元素在 <form> 元素中使用，用來聲明容許用戶輸入數據的 input 控件；

    二、輸入字段可經過多種方式改變，取決於 type 屬性。

 

2、相同之處

<input> 中 type=「button」   與  <button> 中 type=「button」  是同樣的

<input> 中 type=「submit」  與  <button> 中 type=「submit」 是同樣的

當<button>未處於<form>表單中時，其瀏覽器默認的type就是button，這個時候與input的type=「button」就是同樣的接軌

而當<button>處於<form>表單中時，不一樣的瀏覽器對 <button> 元素的 type 屬性使用不一樣的默認值，這個時候有所區分了

 

3、不一樣之處

若是在 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	按鈕	按鈕

 

4、總結

    所以，請始終爲 <button> 元素規定 type 屬性。由於不一樣的瀏覽器對 <button> 元素的 type 屬性使用不一樣的默認值；

    若是在 HTML 表單中使用 <button> 元素，不一樣的瀏覽器可能會提交不一樣的按鈕值。所以請儘量使用 <input> 在 HTML 表單中建立按鈕