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

Ответ 1

Ответ с точки зрения ASP.NET.

Я был взволнован, когда нашел этот вопрос и некоторый код для элемента управления ModernButton, который, в конце концов, является элементом управления <button>.

Итак, я начал добавлять всевозможные эти кнопки, украшенные тегами <img /> внутри них, чтобы они выделялись. И все это отлично поработало... в Firefox и Chrome.

Затем я попробовал IE6 и получил "потенциально опасное значение Request.Form", потому что IE6 отправляет html внутри кнопки, что в моем случае содержит html-теги. Я не хочу отключать флаг validateRequest, потому что мне нравится этот добавленный бит проверки данных.

Итак, я написал несколько javascript, чтобы отключить эту кнопку до отправки. Отлично работал на тестовой странице с помощью одной кнопки, но когда я попробовал ее на реальной странице, у которой были другие теги <button>, она снова взорвалась. Поскольку IE6 представляет ВСЕ кнопки html-кнопок. Итак, теперь у меня есть все виды кода для отключения кнопок перед отправкой.

Те же проблемы с IE7. IE8, к счастью, зафиксировал это.

Хлоп. Я бы порекомендовал не идти по этому пути, если вы используете ASP.NET.

Update:

Я нашел библиотеку, которая выглядит многообещающей, чтобы исправить это.

Если вы используете ie8.js script из этой библиотеки: http://code.google.com/p/ie7-js/

Это может получиться просто отлично. IE8.js добавляет IE5-7 к скорости с IE8 с тегом кнопки. Это делает представленное значение реальным значением и отправляется только одна кнопка.

Ответ 2

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

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

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

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

Ответ 3

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

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

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

Ответ 4

Плюсы:

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

Минусы:

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

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

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

Ответ 5

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

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

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

Ответ 6

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

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

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

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

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

Ответ 7

Разбито или нет:

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

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

Основные браузеры будут отправлять содержимое атрибута value. Internet exploter отправит текст между тегами <button> и </button>, а также отправит значение любого другого в форме, а не только тот, который вы нажали.

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

Источники:

• http://www.peterbe.com/plog/button-tag-in-IE
• http://www.w3schools.com/tags/default.asp

Ответ 8

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

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

Ответ 9

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

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

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

Ответ 10

насколько я заинтересован, разница между тегами 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 отправит форму со значением = "добавить в корзину" вместо value = "product2"

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

Итак, это:

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

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

Ответ 11

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

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