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

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

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

input (<input>) представляет собой поле данных: некоторые пользовательские данные вы хотите отправить на сервер. Есть несколько типов ввода, связанных с кнопками:

• <input type="submit">
• <input type="image">
• <input type="file">
• <input type="reset">
• <input type="button">

Каждый из них имеет значение, например « файл » используется для загрузки файла, « reset » очищает форму, а « отправить "отправляет данные на сервер. Проверьте ссылку W3 в MDN или в W3Schools.

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

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

Опять же, проверьте ссылку W3 для тега <button> в MDN или в W3Schools.

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

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

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

<button>

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

Vs.

<input type='button'>

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

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

Что касается стиля 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', вход будет запускать функцию, а кнопка - нет.

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

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

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

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

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

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

Внутри элемента <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, работают так же, как кнопки, созданные с помощью элемента INPUT, но они предлагают более широкие возможности визуализации: элемент BUTTON может иметь содержимое. Например, элемент BUTTON, содержащий изображение, функционирует как и может напоминать элемент INPUT, тип которого установлен на «изображение», но тип элемента BUTTON допускает содержимое.

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

Цитата

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

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

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