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

Цитировать

Important: If you use the button element in an HTML form, different browsers will submit different values. Internet Explorer will submit the text between the <button> and </button> tags, while other browsers will submit the content of the value attribute. Use the input element to create buttons in an HTML form.

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

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

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

Со страницы:

Buttons created with the BUTTON element function just like buttons created with the INPUT element, but they offer richer rendering possibilities: the BUTTON element may have content. For example, a BUTTON element that contains an image functions like and may resemble an INPUT element whose type is set to “image”, but the BUTTON element type allows content.

The Button Element - W3C

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

Buttons created with the BUTTON element function just like buttons created with the INPUT element, but they offer richer rendering possibilities: the BUTTON element may have content. For example, a BUTTON element that contains an image functions like and may resemble an INPUT element whose type is set to "image", but the BUTTON element type allows content.

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

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

And while we're talking about IE, it's got a couple of bugs related to the width of buttons. It'll mysteriously add extra padding when you're trying to add styles, meaning you have to add a tiny hack to get things under control.

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

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

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

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

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

Редактировать - подробнее

Без типа button неявно получает тип submit. Неважно, сколько кнопок отправки или полей ввода есть в форме, любая из них, которая явно или неявно введена как 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"

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

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

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

Якоря (элемент <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.

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

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

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

Есть большая разница, если вы используете jQuery. jQuery знает о большем количестве событий на входах, чем на кнопках. На кнопках jQuery знает только о событиях щелчка. На входах jQuery распознает события «щелчок», «фокус» и «размытие».

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

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

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

<button>

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

против.

<input type='button'>

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

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

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

Если вы не можете сделать это по разным причинам, не забудьте добавить атрибут role = ”button” в свой тег для доступности. Эта статья достаточно информативная: https://www.deque.com/blog/accessible-aria-buttons/