Html-button和input的區別

標籤：safari   strong   form   order   建立   button   table   att   相同   

一、定義和用法

<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 表單中建立按鈕

 

 

Html-button和input的區別