Что недостатки там к <кнопка> тег?

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

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

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

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

Плюсы:

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

Минусы:

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

Из https://developer.mozilla.org/en-US / docs / Web / HTML / Element / button :

В IE7 есть ошибка, из-за которой при отправке формы с помощью Click me отправленные данные POST приводят к myButton = Click me вместо myButton = Foo. В IE6 ошибка еще хуже, когда при отправке формы через кнопку отправляются ВСЕ кнопки формы, с той же ошибкой, что и в IE7. Эта ошибка была исправлена ​​в IE8.

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

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

• В противном случае: если вы все еще поддерживаете 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>.

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

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

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

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

Насколько мне известно, разница между тегами 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

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

Как обычно, ответ: « это прекрасно работает во всех основных браузерах, но имеет следующие особенности в IE. «Я не думаю, что это будет проблемой для вас.

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

Основные браузеры отправляют содержимое атрибута value. Internet exploter отправит текст между тегами

и , а также отправит значение каждого другого тега в форме, а не только того, который вы нажали.

Для ваших целей просто очищая старый HTML, это не должно быть проблемой.

Источники:

1. http://www.peterbe.com/plog/button-tag-in-IE
2. http: // www. w3schools.com/tags/default.asp[1272 visible

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

Напротив, ни один из браузеров не отправит форму, если или

нажаты элементов. И, естественно, все браузеры отправят форму при нажатии элементов или .

As @ В ответе orip говорится, что для обеспечения согласованного поведения отправки в разных браузерах всегда используйте

или < button type = "submit" /> внутри элемента

. Никогда не пропускайте атрибут типа .

Все, что вам нужно знать: W3Schools Тег

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

Важно: если вы используете элемент кнопки в форме HTML, разные браузеры будут отправлять разные значения. Internet Explorer отправит текст между тегами

и , в то время как другие браузеры отправят содержимое атрибута value. Используйте элемент input для создания кнопок в форме HTML.

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

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