Вопрос:


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

<input type="button" />

вместо:

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

1413


источник


Ответы:


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

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


580



Как примечание, <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"

262



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

Со страницы:

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

Элемент Button - W3C


159



котировка

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

Из : http://www.w3schools.com/tags/tag_button.asp

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


36



Inside a <button> element you can put content, like text or images.

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

This is the difference between this element and buttons created with the <input> element.


36



Use button from input element if you want to create button in a form. And use button tag if you want to create button for an action.


16



I will quote the article The Difference Between Anchors, Inputs and Buttons:

Anchors (the <a> element) represent hyperlinks, resources a person can navigate to or download in a browser. If you want to allow your user to move to a new page or download a file, then use an anchor.

An input (<input>) represents a data field: so some user data you mean to send to server. There are several input types related to buttons: <input type="submit">, <input type="image">, <input type="file">, <input type="reset">, <input type="button">.
Each of them has a meaning, for example "file" is used to upload a file, "reset" clears a form, and "submit" sends the data to the server. Check W3 reference on MDN or on W3Schools.

The button (<button>) element is quite versatile:

  • you can nest elements within a button, such as images, paragraphs, or headers;
  • buttons can also contain ::before and ::after pseudo-elements;
  • buttons support the disabled attribute. This makes it easy to turn them on and off.

Again, check W3 reference for <button> tag on MDN or on W3Schools.


16



Quoting the Forms Page in the HTML manual:

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.


15



There is a big difference if you are using jQuery. jQuery is aware of more events on inputs than it does on buttons. On buttons, jQuery is only aware of 'click' events. On inputs, jQuery is aware of 'click', 'focus', and 'blur' events.

You could always bind events to your buttons as needed, but just be aware that the events that jQuery automatically is aware of are different. For example, if you created a function that was executed whenever there was a 'focusin' event on your page, an input would trigger the function but a button would not.


8