定義和用法
<button>
標簽定義一個按鈕。
在 button 元素內部,您可以放置內容,比如文本或圖像。這是該元素與使用 input 元素創建的按鈕之間的不同之處。
-
<button>
控件 與<input type="button">
相比,提供了更為強大的功能和更豐富的內容。<button>
與</button>
標簽之間的所有內容都是按鈕的內容,其中包括任何可接受的正文內容,比如文本或多媒體內容。例如,我們可以在按鈕中包括一個圖像和相關的文本,用它們在按鈕中創建一個吸引人的標記圖像。 - 唯一禁止使用的元素是圖像映射,因為它對鼠標和鍵盤敏感的動作會干擾表單按鈕的行為。
-
請始終為按鈕規定 type 屬性。Internet Explorer 的默認類型是 "button",而其他瀏覽器中(包括 W3C 規范)的默認值是 "submit"。
<button>標簽
圖例
-
從下圖我們看出<button></button>和<button type="button"></button>的區別。
給后臺提交的值
自己的實驗
通過network可看到各個按鈕向后臺提交數據的情況。
Paste_Image.png
- 2和4是兩個空按鈕,1和3都會提交name: value的值到后臺。
(在Chrome瀏覽器下)
補充
- 表單提交時,所有具有name屬性的html輸入元素(包括input標簽、button標簽、select標簽等)都將作為鍵值對提交,除了Submit對象。Submit對象只有在自己被單擊后的提交中才會作為鍵值對被提交。
- 但是對于從事WEB UI的人應該要注意到,使用submit來提高頁面易用性:使用submit后,頁面支持鍵盤enter鍵操作,而很多WEB軟件設計師,可能沒有注意到submit, 用button后往往頁面不支持enter鍵了。所以需要支持enter鍵,必須要設置個submit,默認enter鍵對頁面第一個submit進行操作
總結
- 估計學了js之后還會有更多補充。
-
<input type="button" />
這就是一個按鈕。如果你不寫javascript 的話,按下去什么也不會發生。 -
<input type="submit" />
這樣的按鈕用戶點擊之后會自動提交 form,除非你寫了javascript 阻止它。 -
<button>
這個按鈕放在 form 中也會點擊自動提交,比前兩個的優點是按鈕的內容不光可以有文字,還可以有圖片等多媒體內容。(當然,前兩個用圖片背景也可以做到)。它的缺點是不同的瀏覽器得到的 value 值不同;可能還有其他的瀏覽器兼容問題。 - 其他標簽,例如 a, img, span, div,然后用圖片把它偽裝成一個按鈕。(這個按鈕和
<input type="button" />
類同)
洪雷鏈接:https://www.zhihu.com/question/20839977/answer/16354924
button標簽
button和<input type="button">