<button> против.<input type="“button”" />.Что использовать?

Question

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

<input type="button" />

вместо того , чтобы:

<button></button>

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

Answer 1

• Вот страница описывая различия (в принципе, вы можете поместить html в <button></button>)
• И еще одна страница описание того, почему люди избегают <button></button> (Подсказка:IE6)

Еще одна проблема IE при использовании <button />:

И пока мы говорим об IE, в нем есть пара ошибок, связанных с шириной кнопок.Это таинственным образом добавит дополнительные отступы, когда вы пытаетесь добавить стили, что означает, что вам нужно добавить небольшой взлом, чтобы взять ситуацию под контроль.

Answer 2

Просто в качестве дополнительного примечания, <button> будет неявно отправляться, что может вызвать проблемы, если вы хотите использовать кнопку в форме без ее отправки.Таким образом, еще одна причина использовать <input type="button"> (или <button type="button">)

Редактировать - более подробная информация

Без определенного типа, button неявно получает тип submit.Не имеет значения, сколько кнопок отправки или входных данных имеется в форме, любая из них, которая явно или неявно введена как отправить, при нажатии отправит форму.

Существует 3 поддерживаемых типа кнопок

submit ||  "submits the form when clicked (default)"
reset  ||  "resets the fields in the form when clicked"
button ||  "clickable, but without any event handler until one is assigned"

Answer 3

Эта статья кажется, это дает довольно хороший обзор разницы.

Со страницы:

Кнопки, созданные с помощью элемента BUTTON, функционируют точно так же, как кнопки , созданные с помощью элемента INPUT, но они предлагают более богатую визуализацию возможности:элемент BUTTON может содержать содержимое.Например, КНОПКА элемент, содержащий изображение функционирует подобно и может напоминать Элемент ввода, тип которого установлен в “изображение”, но тип элемента BUTTON допускает содержимое.

Элемент Кнопки - W3C

Answer 4

Внутри a <button> элемент, в который вы можете поместить содержимое, например текст или изображения.

<button type="button">Click Me!</button> 

В этом разница между этим элементом и кнопками, созданными с помощью <input> элемент.

Answer 5

Цитата

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

От : http://www.w3schools.com/tags/tag_button.asp

Если я правильно понимаю, ответ заключается в совместимости и согласованности ввода от браузера к браузеру

Answer 6

Цитируя Страница форм в руководстве по HTML:

Кнопки, созданные с помощью элемента BUTTON, функционируют точно так же, как кнопки, созданные с помощью элемента INPUT, но они предлагают более широкие возможности рендеринга:элемент BUTTON может иметь содержимое.Например, элемент BUTTON, который содержит изображение, функционирует подобно и может напоминать элемент INPUT, тип которого установлен в "image", но тип элемента BUTTON допускает содержимое.

Answer 7

Используйте кнопку из элемента ввода, если вы хотите создать кнопку в форме.И используйте тег button, если вы хотите создать кнопку для действия.

Answer 8

Я процитирую статью Разница между Якорями, входами и кнопками:

Якоря (тот <a> элемент) представляют собой гиперссылки, ресурсы, к которым пользователь может перейти или загрузить в браузере.Если вы хотите разрешить вашему пользователю переходить на новую страницу или загружать файл, то используйте привязку.

Ан входные данные (<input>) представляет поле данных:итак, некоторые пользовательские данные, которые вы хотите отправить на сервер.Существует несколько типов ввода, связанных с кнопками: <input type="submit">, <input type="image">, <input type="file">, <input type="reset">, <input type="button">.
Каждый из них имеет свое значение, например "файл" используется для загрузки файла",Сброс" очищает форму, и "Отправить" отправляет данные на сервер.Проверьте ссылку W3 на MDN или в W3Schools.

В кнопка (<button>) элемент довольно универсален:

• в кнопку можно вложить элементы, такие как изображения, абзацы или заголовки;
• кнопки также могут содержать ::before и ::after псевдоэлементы;
• кнопки поддерживают disabled атрибут.Это упрощает их включение и выключение .

Снова проверьте ссылку W3 на <button> тег на MDN или в W3Schools.

Answer 9

Существует большая разница, если вы используете jQuery.jQuery знает о большем количестве событий на входных данных, чем на кнопках.Что касается кнопок, jQuery знает только о событиях "click".Что касается входных данных, jQuery знает о событиях "щелчок", "фокус" и "размытие".

Вы всегда можете привязать события к своим кнопкам по мере необходимости, но просто имейте в виду, что события, о которых jQuery автоматически узнает, отличаются.Например, если вы создали функцию, которая выполнялась всякий раз, когда на вашей странице происходило событие 'focusin', ввод запускал бы функцию, а кнопка - нет.

Answer 10

<button>

• по умолчанию ведет себя так, как если бы у него был атрибут "type ="submit"
• может использоваться как без формы, так и в формах.
• допускается текстовое или html-содержимое
• разрешены псевдоэлементы css (например, :before)
• имя тега обычно уникально для одной формы

против.

<input type='button'>

• тип должен быть установлен в 'submit', чтобы вести себя как отправляющий элемент
• может использоваться только в формах.
• допускается только текстовое содержимое
• никаких псевдоэлементов css
• то же имя тега, что и у большинства элементов формы (входных данных)

--
в современных браузерах оба элемента легко стилизуются с помощью css, но в большинстве случаев, button элемент предпочтительнее, так как вы можете стилизовать больше с помощью внутреннего html и псевдоэлементов

Answer 11

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

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

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

Answer 12

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

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

Answer 13

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

Answer 14

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