目錄
使用場景:
首頁 web前端 H5教程 button按鈕和submit按鈕有什麼不同?

button按鈕和submit按鈕有什麼不同?

Jan 08, 2019 am 10:43 AM
css html html5

這篇文章帶給大家的內容是關於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="提交"/>
登入後複製

以上是button按鈕和submit按鈕有什麼不同?的詳細內容。更多資訊請關注PHP中文網其他相關文章!

本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn

熱AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智慧驅動的應用程序,用於創建逼真的裸體照片

AI Clothes Remover

AI Clothes Remover

用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool

Undress AI Tool

免費脫衣圖片

Clothoff.io

Clothoff.io

AI脫衣器

Video Face Swap

Video Face Swap

使用我們完全免費的人工智慧換臉工具,輕鬆在任何影片中換臉!

熱工具

記事本++7.3.1

記事本++7.3.1

好用且免費的程式碼編輯器

SublimeText3漢化版

SublimeText3漢化版

中文版,非常好用

禪工作室 13.0.1

禪工作室 13.0.1

強大的PHP整合開發環境

Dreamweaver CS6

Dreamweaver CS6

視覺化網頁開發工具

SublimeText3 Mac版

SublimeText3 Mac版

神級程式碼編輯軟體(SublimeText3)

熱門話題

Java教學
1655
14
CakePHP 教程
1413
52
Laravel 教程
1306
25
PHP教程
1252
29
C# 教程
1226
24
vue中怎麼用bootstrap vue中怎麼用bootstrap Apr 07, 2025 pm 11:33 PM

在 Vue.js 中使用 Bootstrap 分為五個步驟:安裝 Bootstrap。在 main.js 中導入 Bootstrap。直接在模板中使用 Bootstrap 組件。可選:自定義樣式。可選:使用插件。

了解HTML,CSS和JavaScript:初學者指南 了解HTML,CSS和JavaScript:初學者指南 Apr 12, 2025 am 12:02 AM

WebDevelovermentReliesonHtml,CSS和JavaScript:1)HTMLStructuresContent,2)CSSStyleSIT和3)JavaScriptAddSstractivity,形成thebasisofmodernWebemodernWebExexperiences。

HTML,CSS和JavaScript的角色:核心職責 HTML,CSS和JavaScript的角色:核心職責 Apr 08, 2025 pm 07:05 PM

HTML定義網頁結構,CSS負責樣式和佈局,JavaScript賦予動態交互。三者在網頁開發中各司其職,共同構建豐富多彩的網站。

React在HTML中的作用:增強用戶體驗 React在HTML中的作用:增強用戶體驗 Apr 09, 2025 am 12:11 AM

React通過JSX與HTML結合,提升用戶體驗。 1)JSX嵌入HTML,使開發更直觀。 2)虛擬DOM機制優化性能,減少DOM操作。 3)組件化管理UI,提高可維護性。 4)狀態管理和事件處理增強交互性。

H5指的是什麼?探索上下文 H5指的是什麼?探索上下文 Apr 12, 2025 am 12:03 AM

H5referstoHTML5,apivotaltechnologyinwebdevelopment.1)HTML5introducesnewelementsandAPIsforrich,dynamicwebapplications.2)Itsupportsmultimediawithoutplugins,enhancinguserexperienceacrossdevices.3)SemanticelementsimprovecontentstructureandSEO.4)H5'srespo

H5與HTML5相同嗎? H5與HTML5相同嗎? Apr 08, 2025 am 12:16 AM

"h5"和"HTML5"在大多數情況下是相同的,但它們在某些特定場景下可能有不同的含義。 1."HTML5"是W3C定義的標準,包含新標籤和API。 2."h5"通常是HTML5的簡稱,但在移動開發中可能指基於HTML5的框架。理解這些區別有助於在項目中準確使用這些術語。

HTML:結構,CSS:樣式,JavaScript:行為 HTML:結構,CSS:樣式,JavaScript:行為 Apr 18, 2025 am 12:09 AM

HTML、CSS和JavaScript在Web開發中的作用分別是:1.HTML定義網頁結構,2.CSS控製網頁樣式,3.JavaScript添加動態行為。它們共同構建了現代網站的框架、美觀和交互性。

HTML的未來:網絡設計的發展和趨勢 HTML的未來:網絡設計的發展和趨勢 Apr 17, 2025 am 12:12 AM

HTML的未來充滿了無限可能。 1)新功能和標準將包括更多的語義化標籤和WebComponents的普及。 2)網頁設計趨勢將繼續向響應式和無障礙設計發展。 3)性能優化將通過響應式圖片加載和延遲加載技術提升用戶體驗。

See all articles