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

<input type="button" />

Вместо того:

<button></button>
  • Каковы основные различия между ними, если таковые имеются?
  • Есть ли веские причины использовать одно вместо другого?
  • Есть ли веские причины использовать их вместе?
  • Связано ли использование <button> с проблемами совместимости, поскольку оно не очень широко используется?
1786
Aron Rotteveel 22 Янв 2009 в 16:14
6
Ссылаясь на документацию по состоянию на октябрь 2020 года: While <input> elements of type button are still perfectly valid HTML, the newer <button> element is now the favored way to create buttons. Given that a <button>’s label text is inserted between the opening and closing tags, you can include HTML in the label, even images.
 – 
Jakob
15 Окт 2020 в 15:58
2
Я понимаю, что MDN - достойный справочник, но я не смог найти подобных рекомендаций в спецификации HTML5 или каких-либо RFC-подобных документах.
 – 
wlnirvana
24 Мар 2021 в 16:33
1
Mozilla Developer Network - это не «документация», это общедоступный (добровольный) ресурс, который функционирует как [удобное] «приложение» к широко принятым спецификациям, таким как опубликованная WHATWG для HTML 5 на html.spec.whatwg.org.
 – 
amn
23 Апр 2021 в 13:56

15 ответов

Лучший ответ

Другая проблема IE при использовании <button />:

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

690
DarkAjax 11 Июл 2017 в 21:32
214
Этот ответ был в 2009 году, поскольку IE6 мертв, я полагаю, нет причин не использовать <button> сейчас?
 – 
Rosdi Kasim
26 Фев 2013 в 15:06
80
Если они хотят пиратство, позвольте им получить отстойную версию вашего сайта. Отбросьте IE6, отбросьте IE7, к сожалению, IE8 все еще нуждается в поддержке.
 – 
Jared
15 Авг 2013 в 05:33
16
Согласно странице обратного отсчета для IE6 Microsoft, использование IE6 в Китае все еще используется (по состоянию на январь 2014 г.) примерно 22%. ie6death.com отмечает, что поддержка IE6 прекращается 8 апреля 2014 г.
 – 
BryanH
19 Янв 2014 в 03:33

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

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

26
GameO7er 18 Дек 2019 в 10:55

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

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

18
gimel 22 Янв 2009 в 16:19

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

17
nickomarsa 1 Мар 2011 в 11:17
9
Для сценариев на стороне клиента. не работает в HTML.
 – 
iGEL
3 Мар 2012 в 17:40
<button>
  • по умолчанию ведет себя так, как если бы у него был атрибут "type =" submit "
  • можно использовать как без формы, так и в формах.
  • текст или HTML-контент разрешен
  • псевдоэлементы css разрешены (например, раньше)
  • имя тега обычно уникально для одной формы

Vs.

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

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

12
Sergey Sklyar 31 Окт 2017 в 11:55

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

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

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

9
Community 23 Май 2017 в 15:34

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

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

9
MattC 21 Дек 2015 в 20:12
Re: KjetilNordin - У нас было приложение, которое знало о любых событиях focusin на странице, и одно произошло, произошло действие. Таким образом, если вы используете ввод, вы можете наблюдать за всеми элементами для одного события. Не говорю, что вы должны, но вы могли бы. Риск состоит в том, что кто-то изменит ввод на кнопку, и тогда фокус не произойдет, а затем ваше действие не произойдет, а затем ваше приложение начнет работать. Вот что с нами случилось. :)
 – 
MattC
2 Май 2016 в 21:08
1
Использовать события фокуса, когда элемент в настоящее время нацелен с помощью мыши / клавиатуры. они показывают пользователю, где они находятся в документе.
 – 
albert
16 Май 2017 в 20:14

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

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

9
Nasia Makrygianni 11 Мар 2020 в 17:54

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

8
Roumelis George 4 Янв 2018 в 18:05

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

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

7
Moh S. 28 Июн 2014 в 02:51

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

4
deadManN 18 Сен 2017 в 10:38

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

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

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

55
Danield 9 Июл 2015 в 01:31

Как примечание, <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"
360
radiovisual 10 Ноя 2017 в 13:57

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

Со страницы:

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

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

180
Andrei Botalov 4 Авг 2012 в 11:24

Цитата

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

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

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

42
Joel Coehoorn 22 Янв 2009 в 16:54