首頁 > web前端 > html教學 > input的button和submit的差別

input的button和submit的差別

WBOY
發布: 2016-09-15 11:15:19
原創
1269 人瀏覽過

故事由來:

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

故事梗:

  現在公司裡面做一個項目,用到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按鈕應該作為數據的輸入來使用。

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

 

來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板