網站開發進階(四十四)input type=“submit“ 和“button“的區別

#網站開發進階(四十四)input type=“submit” 和"button"的區別

在一個頁面上畫一個按鈕，有四種辦法：

這就是一個按鈕。如果你不寫javascript 的話，按下去什么也不會發生。

這樣的按鈕用戶點擊之后會自動提交 form，除非你寫了javascript 阻止它。

這個按鈕放在 form

中也會點擊自動提交，比前兩個的優點是按鈕的內容不光可以有文字，還可以有圖片等多媒體內容。（當然，前兩個用圖片背景也可以做到）。它的缺點是不同的瀏覽器得到的

value 值不同；可能還有其他的瀏覽器兼容問題。

其他標簽，例如 a, img, span, div，然后用圖片把它偽裝成一個按鈕。

需要強調的一點是，其實不是一個畫面元素，而是一個表單（Form）元素，和文本輸入是一樣的，都屬于“數據”的一部分（特征是，有value屬性，而且該屬性的值，會被傳送到server端，可以拿來用），而不是樣式的一部分。這種表現和數據混淆的設計，是早期web標準還比較簡陋的時代的遺產。

從畫面表現上看，通過CSS可以把兩者描繪得完全一樣。

從畫面動作上看，通過JS可以強制兩者動作也一致（都提交或者都不提交）。

但是只有表單數據這個特性，是無法混淆的。無法把自己當成Form的數據。所以，如果只是個單純的按鈕，觸發一些畫面動作，請使用；反之，會把畫面的數據提交給Server的，一般用，當然+JS也完全可以取代。

Submit是專門用于提交表單的Button，與Button的區別主要有兩點：

type=button 就單純是按鈕功能

type=submit 是發送表單

(1)Submit將表單提交(form.submit())作為其onclick后的默認事件，Button并非如此

(2)表單提交時，所有具有name屬性的html輸入元素(包括input標簽、button標簽、select標簽等)都將作為鍵值對提交，除了Submit對象。Submit對象只有在自己被單擊后的提交中才會作為鍵值對被提交。

但是對于從事WEB UI的人應該要注意到，使用submit來提高頁面易用性：

使用submit后，頁面支持鍵盤enter鍵操作，而很多WEB軟件設計師，可能沒有注意到submit統一.

用button后往往頁面不支持enter鍵了。所以需要支持enter鍵，必須要設置個submit，默認enter鍵對頁面第一個submit進行操作。

執行完onClick，轉到action。可以自動提交不需要onClick。所以說onclick這里可以不要。

執行完onClick，跳轉文件在 js文件里控制。提交需要onClick。

比如：

1，οnclick=“form1.action=‘a.jsp’;form1.submit();” 這樣就實現了submit的功能了。

講白一些，就是submit會有一個跳轉，頁面會刷新；而button不會刷新，就是一個button；可以用來生成按鈕，更加靈活，樣式更好控制。

 

云速建站 網站

版權聲明：本文內容由網絡用戶投稿，版權歸原作者所有，本站不擁有其著作權，亦不承擔相應法律責任。如果您發現本站中有涉嫌抄襲或描述失實的內容，請聯系我們jiasou666@gmail.com 處理，核實后本網站將在24小時內刪除侵權內容。