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="提交"/>