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按鈕應該作為數據的輸入來使用。

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