it-swarm.com.ru

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

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

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

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

Изменить на 2015 год

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

64
Kzqai

Отвечая с точки зрения 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 с тегом кнопки. Это делает представленное значение реальным значением, и только одна кнопка отправляется.

17
slolife

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

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

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

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

49
orip

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

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

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

13
David Brown

Плюсы:

  • Метка дисплея не должна совпадать с отправленным значением. Отлично подходит для 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.

10
Quentin

Важное замечание: в форме, содержащей элемент <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.

9
Chris Calo

У меня был некоторый опыт работы с причудами <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; Ok для использования, если вы не заботитесь о древних браузерах, но Bootstrap предоставляет еще более надежные CSS визуально похожие альтернативы, которые стоит рассмотреть.

5
Kzqai

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

Как обычно, ответ «он отлично работает во всех основных браузерах, но имеет следующие особенности в 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
4
Robert Kuykendall

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

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

1
Chris Haas

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

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

1
moey

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

0
George Panic