button和submit的區別

button-普通按鈕,submit-提交按鈕。
  submit是button的一個特例,也是button的一種,它把提交這個動作自動集成了,submit和button,二者都以按鈕的形式展現,看起來都是按鈕,所不同的是type屬性和處發響應的事件上。

使用場景:

  這裏說的部分使用場景,並不是只能用一種,只是說,在這種場景下使用更加方便,程序員工作量小。
用表格對比一下:

場景 button submit
網頁上需要提交信息到服務器
網頁上執行一個普通的事件,如重置、清空功能。
提交表單 需要綁定事件才能提交表單數據
局部刷新 不可以使用,在觸發事件的同時會提交表單。
沒有表單,卻要提交數據 而button默認是不提交任何數據。可以綁定事件的方式來提交數據。 submit需要有表單時,提交時纔會帶數據。當然使用submit也可以,但是前提要攔截onclick事件。
表單數據太多的時候 需要寫很多數據的獲取動作 推薦
提交數據是要使用JS進行校驗的,但如果這時候用戶禁用了JS,那麼校驗就失效了,如果後臺也沒有進行校驗,那麼不合法的數據就進入後臺了。 推薦:通過button提交數據,那麼如果用戶禁用JS,那麼數據提交動作就激活不了 不推薦

補充

  1、上面的場景中,表單在點擊提交按鈕後需要用JS進行處理(包括輸入驗證)後再提交的話,通常我們提倡用button,如果需要使用submit提交前驗證的話 應在方法前加return。onClick方法不加return 會自動提交,並不會起到約束的作用, 所以,使用submit時需要驗證請加 return true或false。
  如一個登陸模塊,先驗證用戶名是否爲空,如果爲空,SUBMIT點擊時永遠提交不到from表單指定頁面。只能是表單形式發送噢!而且不能再表單指定的頁面中去驗證傳進來的值。

function check(){
   var name = document.getElementById("name").value;
   if(name ==  null || name == ''){
        alert("用戶名不能爲空");   
        return false;
   }
   return true;
}


<form name="form" action="跳轉的頁面" method="post"  onsubmit="return check()">
  <input type="text" id="name"/>
  <input type="submit" value="提交"/>
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章