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

Question

Я начал использовать диагностическую таблицу стилей CSS, например, http://snipplr.com/view/6770/css-diagnostics--highlight-deprecated-html-with-css--more/

В одном из предложенных правил выделены входные теги с типом submit, с рекомендацией использовать <button> в качестве более семантического решения. Каковы преимущества или недостатки <button> с типом отправки (например, совместимость с браузером), с которым вы столкнулись?

Просто чтобы прояснить, я понимаю спецификацию <button>, у нее есть определенные начало и конец, она может содержать различные элементы, тогда как input является синглетным и не может содержать вещи. По сути, я хочу знать, сломан он или нет. Я хотел бы знать, насколько полезна кнопка в текущий момент. Первый ответ, приведенный ниже, по-видимому, подразумевает, что он не подходит для использования, за исключением форм, к сожалению.

Изменить на 2015 г.

Пейзаж изменился! У меня есть еще 6 лет опыта работы с кнопками, и браузеры несколько перешли от IE6 и IE7. Поэтому я добавлю ответ, в котором подробно опишу, что я узнал и что я предлагаю.

Answer 1

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

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

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

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

Answer 2

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

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

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

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

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

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

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

Обновление:

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

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

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

Answer 3

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

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

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

Answer 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.

Answer 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.

Answer 6

У меня был некоторый опыт с причудами <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>.

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

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

Answer 7

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

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

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

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

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

Источники:

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

Answer 8

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

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

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

Answer 9

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

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

Answer 10

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

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

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