IT工程師數位筆記本

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

　　特別感謝 @守護晴天 ，指出了博客中不細致不嚴謹的地方，也讓我學到了更多，更多是覺得抱歉，由于自己的不細致可能誤導了一些朋友對button的看法，實在是抱歉，之前看過這篇博客的朋友如果有時間的話希望能夠再看一遍或者看提供的pdf，pdf文檔上有更改記錄，下載有修改記錄的pdf，下載無修改記錄版pdf。

在html中，如今有兩種方式可以在html頁面上呈現出一個按鈕。

1. 使用button標簽
2. 使用input，type的值設置為button

但是在實際的使用過程中，發現二者還是有不小的區別的，就目前的使用情況來說，如果想要在頁面上表示一個顯示文本的按鈕推薦input[type=”button”]方式，如果想要呈現一個圖片內容或內容更豐富的按鈕推薦使用button元素

1.input[type="button"]這種方式可能大家都比較熟悉了，控制這種方式的按鈕的顯示文本只需要設置input的value屬性即可，value屬性的值就是顯示在按鈕上的文本

2.button標簽方式，設置value的值對于顯示按鈕的文本并沒有什么影響，下面是一段代碼的測試結果，測試的瀏覽器分別是 chrome,IE11和Edge，經過這段代碼測試可以確定的是，決定button標簽表示的按鈕的文本不是由value值控制的，而是由標簽間的文本決定的

在添加onclick事件，設置value值，依次點擊兩個按鈕的時候，結果是這樣的

修改onclick事件，這次設置innerText屬性，依點擊觸發onclick事件，測試的結果是這樣的

總結上述測試結果，input[type="button"]這種按鈕推薦控制value來控制顯示按鈕的文本，button標簽顯示的按鈕推薦使用控制元素的innerText屬性來控制顯示文本

修改測試代碼，將兩種按鈕都放在form中，添加onclick事件，在以上幾個瀏覽器中測試結果相同故只截圖了在edge瀏覽器中的顯示效果

在點擊button顯示的按鈕之后，效果是這樣的，先彈出"entered"的對話框，之后頁面跳轉到了表單要提交的網址，必應首頁

點擊input[type="button"]按鈕之后，出現彈窗之后并未出現頁面跳轉，仍然提留在了原頁面

input[type="button"]按鈕點擊OK之后還是在這個頁面，并未出現頁面跳轉的情況，由此可以說明表單并未提交，而對比button標簽的按鈕出現了頁面跳轉也就是表單提交，另外button也彈出了"entered"的提示窗口，說明也觸發onclick事件，但是雖然事件并未提交表單，但是button的onclick事件依然提交了表單類似于一個input[type="submit"]元素。

-----------------------------------------補充----------------------------------------

以上是未對button元素設置type屬性，如果不設置button元素的type屬性，Internet Explorer 的默認類型是 "button"，而其他瀏覽器中（包括 W3C 規范）的默認值是 "submit"，因此請始終為button元素設置type屬性，button元素的type屬性值可選值為button、submit、reset，設置過button元素的type屬性之后便不再有瀏覽器兼容性的問題了

三、使用button創建內容更豐富的按鈕

    各瀏覽器表現一致，示例代碼如下：

     截取頁面在瀏覽器中的表現效果：

四、結論

　　綜上所述， 如果想要在頁面上表示一個顯示文本的按鈕推薦input[type=”button”]方式，如果想要呈現一個圖片內容或內容更豐富的按鈕推薦使用button元素