html - title速度 - td title




<按鈕>與<輸入類型=“按鈕”/>。 使用哪個? (10)

這篇文章似乎提供了一個相當不錯的概述。

來自頁面:

使用BUTTON元素創建的按鈕就像使用INPUT元素創建的按鈕一樣,但它們提供了更豐富的呈現可能性:BUTTON元素可能包含內容。 例如,包含圖像的BUTTON元素的功能類似於並可能類似於其類型設置為“圖像”的INPUT元素,但BUTTON元素類型允許內容。

按鈕元素 - W3C

在查看大多數網站(包括SO)時,大多數網站使用:

<input type="button" />

代替:

<button></button>
  • 兩者之間的主要區別是什麼?
  • 是否有正當理由使用一個而不是另一個?
  • 有沒有合理的理由使用它們?
  • 使用<button>是否帶有兼容性問題,看到它沒有被廣泛使用?

<button>的靈活性在於它可以包含HTML。 而且,使用CSS進行樣式設計更容易,而且樣式實際上可以在所有瀏覽器中應用。 但是,有關Internet Explorer(Eww!IE!)的一些缺點。 Internet Explorer無法正確檢測值屬性,將標記的內容用作值。 無論按鈕是否被點擊,表單中的所有值都會發送到服務器端。 這使得它作為一個<button type="submit">棘手和痛苦。

另一方面, <input type="submit">沒有任何值或檢測問題,但是不能像<button>那樣添加HTML。 樣式也很難,樣式在所有瀏覽器中都不會很好地反應。 希望這有助於。


如果您使用jQuery,則會有很大的區別。 jQuery知道輸入的事件多於按鈕上的事件。 在按鈕上,jQuery只知道'點擊'事件。 在輸入上,jQuery知道'點擊','焦點'和'模糊'事件。

您可以根據需要始終將事件綁定到按鈕,但請注意jQuery自動識別的事件是不同的。 例如,如果您創建了一個在頁面上出現“focusin”事件時執行的函數,則輸入會觸發該函數,但按鈕不會。


如果要在表單中創建按鈕,請使用輸入元素中的按鈕。 如果你想為動作創建按鈕,可以使用按鈕標籤。


就像旁註一樣, <button>會隱式提交,如果你想在不提交的情況下使用表單中的按鈕,會導致問題。 因此,使用<input type="button"> (或<button type="button"> )的另一個原因是

編輯 - 更多細節

沒有類型, button隱含地接收submit類型 。 無論表單中有多少個提交按鈕或輸入,其中任何一個顯式或隱式鍵入為提交,單擊時都會提交表單。

有3種支持類型的按鈕

submit ||  "submits the form when clicked (default)"
reset  ||  "resets the fields in the form when clicked"
button ||  "clickable, but without any event handler until one is assigned"

引用

重要提示:如果您在HTML表單中使用按鈕元素,不同的瀏覽器會提交不同的值。 Internet Explorer將在<button></button>標記之間提交文本,而其他瀏覽器將提交value屬性的內容。 使用輸入元素在HTML表單中創建按鈕。

來自: http://www.w3schools.com/tags/tag_button.asphttp://www.w3schools.com/tags/tag_button.asp

如果我理解正確,答案是從瀏覽器到瀏覽器的兼容性和輸入一致性


我只想在這裡添加其他答案。 輸入元素被認為是空的或無效的元素(其他空元素是區域,基礎,br,col,hr,img,輸入,鏈接,元和參數,你也可以here ),這意味著它們不能有任何內容。 除了沒有任何內容之外,空元素不能包含像:: after和:: before之類的任何偽元素 ,這是我認為的一個主要缺點。


我將引用文章“錨點,輸入和按鈕之間的差異

<a>元素)代表超鏈接,人們可以導航到或在瀏覽器中下載的資源。 如果您想允許用戶移動到新頁面或下載文件,請使用錨點。

一個輸入<input> )代表一個數據字段:所以你需要發送給服務器的一些用戶數據。 有幾種與按鈕相關的輸入類型: <input type="submit"><input type="image"><input type="file"><input type="reset"><input type="button">
每一個都有一個含義,例如“ 文件 ”用於上傳文件,“ 重置 ”清除表單,“ 提交 ”將數據發送到服務器。 檢查MDNW3School 上的 W3參考。

按鈕<button>)元素非常通用:

  • 您可以在按鈕中嵌套元素,例如圖像,段落或標題;
  • 按鈕也可以包含::before::after偽元素;
  • 按鈕支持disabled屬性。 這可以很容易地打開和關閉它們。

再次檢查MDN上http://www.w3schools.com/tags/tag_button.asp 上的 <button>標記的W3參考。


簡而言之,IE6 / 7與其他瀏覽器的按鈕行為不同,而輸入按鈕在所有瀏覽器中的行為相同。


<button>
  • 默認情況下表現得好像它有一個“type =”submit“屬性
  • 可以在沒有表格和表格的情況下使用。
  • 允許使用文字或html內容
  • CSS允許偽元素(如:之前)
  • 標籤名稱通常對於單個表單是唯一的

<input type='button'>
  • 類型應該設置為'submit'以表現為提交元素
  • 只能用於表單。
  • 只允許文本內容
  • 沒有CSS偽元素
  • 與大多數表單元素相同的標籤名稱(輸入)

-
在現代瀏覽器中,這兩個元素都可以用css輕鬆修改,但在大多數情況下, button元素是首選,因為您可以使用內部html和偽元素





html-input