Какие недостатки есть в теге?

при использовании <button> всегда указывайте тип, так как браузеры по умолчанию для разных типов.

это будет работать последовательно во всех браузерах:

• <button type="submit">...</button>
• <button type="button">...</button>

таким образом, вы получаете все <button>доброта, никаких недостатков.

все, что нужно знать: W3Schools <button> Tag

этот тег поддерживается во всех основных браузерах.

важно: если вы используете элемент Button в HTML форме, разные браузеры будут представлять различные значения. Internet Explorer отправит текст между <button> и </button> теги, в то время как другие браузеры будут представлять содержимое атрибута value. Используйте input элемент для создания кнопок в HTML форма.

плюсы:

• метка дисплея не должна совпадать с представленным значением. Отлично подходит для i18n и "удалить строку"
• вы можете включить разметку, такую как <em> и <img>

плюсы:

• некоторые версии MSIE по умолчанию type="button" вместо type="submit" поэтому вы должны быть явными
• некоторые версии MSIE будут относиться ко всем <button>s как успешный, поэтому вы не можете сказать, какой из них был нажат в форма кнопки multi-submit
• некоторые версии MSIE отправят отображаемый текст вместо реального значения

важная причуда, о которой нужно знать: в форме, которая содержит <button/> element, IE6 и IE7 не будут отправлять форму, когда элемент. Другие браузеры, с другой стороны, будут отправлять форму.

напротив, никакие браузеры не будут отправлять форму, когда <input type="button"/> или элементы. И, естественно, все браузеры будут отправлять форму, когда <input type="submit"/> или элементы.

как говорит ответ @orip, чтобы получить согласованный отправляйте поведение через браузеры, всегда используйте <button type="button" /> или <button type="submit" /> внутри <form/> элемент. Никогда не оставляйте .

он сломан или нет:

как обычно, ответ:"он отлично работает во всех основных браузерах, но имеет следующие закидоны в IE.

на <button> тег поддерживается всеми основными браузерами. Единственная проблема поддержки заключается в том, что Internet Explorer отправит после нажатия кнопки.

у меня был некоторый опыт с причудами <button> теперь, 6 лет спустя, вот мои предложения:

• если вы еще вспомогательная IE6 или IE7, будьте очень осторожны с кнопкой, поведение очень глючит с этими браузерами,в некоторых случаях представляя innerHtml вместо value= 'whatever' и все значения кнопок вместо одного и шаткого поведения. Так испытайте тщательно или избегите для тех ради браузера.

• в противном случае: если вы все еще поддерживаете IE8, <a href='http://example.com'><button></button></a> не работает хорошо, и, вероятно, что-нибудь еще, где вы вставляете кнопку внутри кликабельного элемента. Так что берегись этого.

• в противном случае: если вы используете <button> в основном как элемент, чтобы щелкнуть для вашего javascript, и это вне формы, сделайте это <button type='button'> и вы, вероятно, будете в порядке!

• В Противном Случае: Если вы используете <button> в форме, будьте осторожны, что типа по умолчанию <button> на самом деле <button type='submit'> в (большинстве) случаев, поэтому будьте явными с вашим типом и вашим value, например: <button type='submit' value='1'>Search</button>.

обратите внимание: использование класса button-mimic, например Bootstrap .btn позволяет вам просто делать такие вещи, как <div> или <a> или даже <button> посмотрите именно так, как вы хотите, и в случае <a> имейте более полезное резервное поведение. Неплохой выбор.

TLDR; хорошо использовать, если вы не заботитесь о древних браузерах, но Bootstrap предоставляет еще более надежные CSS визуально похожие альтернативы, которые стоит изучить.

вот сайт, который объясняет различия: http://www.javascriptkit.com/howto/button.shtml

в основном, тег ввода позволяет только текст (хотя вы можете использовать фоновое изображение), а кнопка позволяет добавлять изображения, таблицы, divs и все остальное. Кроме того, он не требует, чтобы он был вложен в тег form.

вы также можете столкнуться с этими проблемами:

• jQuery не может нацелиться на кнопку (не ошибка jQuery, хотя): в IE7
• несколько переменных запроса, если есть >1 <button>s:http://www.peterbe.com/plog/button-tag-in-IE

еще одна вещь связана с его стилизацией с помощью техника раздвижных дверей: вам нужно вставить другой тег например <span> чтобы заставить его работать.

что касается меня, разница между тегами submit и button заключается в следующем: дает вам возможность отображать другой текст, чем значение элемента

предположим, у вас есть список продуктов, а затем рядом с каждым продуктом вы хотите кнопку, чтобы добавить его в корзину клиента:

product1 : <add to cart>
product2 : <add to cart>
product3 : <add to cart>

<button name="buy" type="submit" value="product2"> add to cart </button>

Теперь проблема в том, что IE отправит форму со значением= "добавить в корзину" вместо значение="то product2"

самый простой способ обойти эту проблему-добавить onclick= " this.value= 'product2'"

значит так:

<button name="buy" type="submit" value="product2" onclick="this.value='product2'"> add to cart </button>

будет делать трюк на всех основных браузерах - я фактически использовал это в форме с несколькими кнопками и работает с Chrome Firefox и IE

похоже, что основная причина использовать <button> должен учитывать CSS-разметку этой кнопки и возможность стилизовать кнопку с изображениями: (см. здесь:http://www.javascriptkit.com/howto/button.shtml)

тем не менее, я думаю, что более принятый подход, который я видел в (X)HTML + CSS,-это использовать div и полностью стилизовать его с изображениями и :наведите псевдоклассы (имитируя кнопку downpress... не удается добавить более одной ссылки на ответ, поэтому просто google "div button" вы увидите много примеров этого), и используя javascript для отправки формы или вызова AJAX... это также имеет еще больший смысл, если вы не используете HTML-формы и делаете все представления с AJAX.