<button> против <input type = "button" />. Какой использовать? - PullRequest
Новая
       57

<button> против <input type = "button" />. Какой использовать?

1538 голосов
/ 22 января 2009

При просмотре большинства сайтов (включая SO), большинство из них используют: 

<input type="button" />

вместо: 

<button></button>
  • Каковы основные различия между ними, если таковые имеются?
  • Есть ли веские причины для использования одного вместо другого?
  • Есть ли веские причины использовать их вместе?
  • При использовании <button> возникают проблемы с совместимостью, поскольку он не очень широко используется?

Ответы [ 14 ]

7 голосов
/ 30 июля 2015

Что касается стиля CSS, то <button type="submit" class="Btn">Example</button> лучше, поскольку он дает вам возможность использовать CSS :before и :after псевдоклассы , которые могут помочь.

Из-за визуального рендеринга <input type="button">, отличающегося от <a> или <span> при использовании классов в определенных ситуациях, я избегаю их.

Стоит отметить, что текущий топовый ответ был написан в 2009 году. Сейчас IE6 не представляет проблемы, поэтому <button type="submit">Wins</button> согласованность стилей в моих глазах выходит на первое место.

6 голосов
/ 28 июня 2014

<button> является гибким в том смысле, что может содержать HTML. Более того, стилизация с использованием CSS намного проще, а стилизация применяется во всех браузерах. Однако в Internet Explorer есть некоторые недостатки (Eww! IE!). Internet Explorer не определяет атрибут значения должным образом, используя содержимое тега в качестве значения. Все значения в форме отправляются на серверную часть независимо от того, нажата кнопка или нет. Это делает использование этого <button type="submit"> хитрым и мучительным.

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

4 голосов
/ 19 июня 2017

Я просто хочу добавить кое-что к остальным ответам здесь. Входные элементы считаются пустыми или недействительными элементами (другие пустые элементы: area, base, br, col, hr, img, input, link, meta и param. Вы также можете проверить здесь ), то есть они не могут есть какой-либо контент. В дополнение к отсутствию какого-либо содержимого, пустые элементы не могут иметь никаких псевдоэлементов, таких как :: after и :: before , что я считаю существенным недостатком.

3 голосов
/ 02 января 2016

Кроме того, одно из различий может исходить от поставщика библиотеки и того, что они кодируют. например, здесь я использую платформу cordova в сочетании с мобильным угловым интерфейсом, и хотя теги input / div / etc хорошо работают с помощью нажатия ng, эта кнопка может привести к сбою отладчика Visual Studio, разумеется, из-за различий, вызванных программистом; обратите внимание, что ответ MattC указывает на ту же проблему, jQuery - это просто библиотека, и поставщик не задумывался о какой-то функциональности для одного элемента, которую он / она предоставляет для другого. поэтому, когда вы используете библиотеку, вы можете столкнуться с проблемой с одним элементом, с которой вы не столкнетесь с другим. и просто популярный, такой как input, в основном будет фиксированным, просто потому, что он более популярен.

Страница:
...