input的button和submit的區別

故事由來：

　　其實這個問題，昨天已經遇到過，可是昨天是公司的一枚老員工幫助我這個實習生調的，並且我也確（猜）定（測）那枚老員工也不知道這個區別。而後今天又遇到相同問題。

故事梗概：

　　如今公司裏面作一個項目，用到AngularJs框架，個人老大給了我一個接口服務，給我去調用和測試，我部署完項目的包在本地tomcat服務器後，開始寫前端的代碼，從html到css到JavaScript（用的少）到bootstrap，好。如今前端的靜態界面搭出來了。而後用老大給的接口服務去測試，angularJS的是一個MVVM框架，典型就是雙向綁定，而後寫完相關邏輯代碼後，每次界面都會無厘頭的跳到本身，我看個人代碼中，若是response返回的是true的話，應該是跳到order界面，而false的話是跳到login界面，總之就是不跳到本身，真是怪了！而後我打開chrome的開發者工具，發現每次都不走寫的Angular的函數裏。後來，檢查出ng-model沒問題，而後發現input的type是submit，我嘗試改爲button，哎喲喂，盡然一切都ok了。這讓我百思不得其解，遂寫這個隨筆，找出事情真相。

故事真相：

　　整體上：有input和button都能當按鈕使用，都能把數據提交到後端供後端處理。

　　不一樣點：①input本是輸入，可是type="submit"後，也起到提交的做用，因此 input 是提交表單

<input type="submit" value="提交">

 

　　②button是按鈕，他是純的按鈕，若是不在按鈕上加上操做，點擊沒有任何反應，只有加上相似type="submit" onclick="xxx()"才能起到按鈕提交的做用。

<button type="submit">肯定</button>

　　因此，按照軟件設計模式的大原則---單一職責原則，建議用button來做爲按鈕，而少用input做爲提交按鈕，input按鈕應該做爲數據的輸入來使用。

　　以上內容來自一個實習生學習前端的感悟。不當之處，還請看客能指出，並在此多謝！