站長資訊網(wǎng)本篇文章給大家?guī)淼膬?nèi)容是關(guān)于button按鈕和submit按鈕有什么區(qū)別？有一定的參考價(jià)值，有需要的朋友可以參考一下，希望對(duì)你有所幫助。
button-普通按鈕，submit-提交按鈕。
submit是button的一個(gè)特例，也是button的一種，它把提交這個(gè)動(dòng)作自動(dòng)集成了，submit和button,二者都以按鈕的形式展現(xiàn),看起來都是按鈕，所不同的是type屬性和處發(fā)響應(yīng)的事件上。
使用場景：
這里說的部分使用場景，并不是只能用一種，只是說，在這種場景下使用更加方便，程序員工作量小。
用表格對(duì)比一下：
| 場景 | button | submit |
|---|---|---|
| 網(wǎng)頁上需要提交信息到服務(wù)器 | √ | |
| 網(wǎng)頁上執(zhí)行一個(gè)普通的事件，如重置、清空功能。 | √ | |
| 提交表單 | 需要綁定事件才能提交表單數(shù)據(jù) | √ |
| 局部刷新 | √ | 不可以使用，在觸發(fā)事件的同時(shí)會(huì)提交表單。 |
| 沒有表單，卻要提交數(shù)據(jù) | 而button默認(rèn)是不提交任何數(shù)據(jù)。可以綁定事件的方式來提交數(shù)據(jù)。 | submit需要有表單時(shí)，提交時(shí)才會(huì)帶數(shù)據(jù)。當(dāng)然使用submit也可以，但是前提要攔截onclick事件。 |
| 表單數(shù)據(jù)太多的時(shí)候 | 需要寫很多數(shù)據(jù)的獲取動(dòng)作 | 推薦 |
| 提交數(shù)據(jù)是要使用JS進(jìn)行校驗(yàn)的，但如果這時(shí)候用戶禁用了JS，那么校驗(yàn)就失效了，如果后臺(tái)也沒有進(jìn)行校驗(yàn)，那么不合法的數(shù)據(jù)就進(jìn)入后臺(tái)了。 | 推薦：通過button提交數(shù)據(jù)，那么如果用戶禁用JS,那么數(shù)據(jù)提交動(dòng)作就激活不了 | 不推薦 |
補(bǔ)充
1、上面的場景中，表單在點(diǎn)擊提交按鈕后需要用JS進(jìn)行處理（包括輸入驗(yàn)證）后再提交的話，通常我們提倡用button，如果需要使用submit提交前驗(yàn)證的話 應(yīng)在方法前加return。onClick方法不加return 會(huì)自動(dòng)提交，并不會(huì)起到約束的作用， 所以，使用submit時(shí)需要驗(yàn)證請(qǐng)加 return true或false。
如一個(gè)登陸模塊，先驗(yàn)證用戶名是否為空，如果為空，SUBMIT點(diǎn)擊時(shí)永遠(yuǎn)提交不到from表單指定頁面。只能是表單形式發(fā)送噢！而且不能再表單指定的頁面中去驗(yàn)證傳進(jìn)來的值。
function check(){ var name = document.getElementById("name").value; if(name == null || name == ''){ alert("用戶名不能為空"); return false; } return true; } <form name="form" action="跳轉(zhuǎn)的頁面" method="post" onsubmit="return check()"> <input type="text" id="name"/> <input type="submit" value="提交"/>
