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

Question

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

<input type="button" />

вместо:

<button></button>

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

Answer 1

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

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

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

Answer 2

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

Answer 3

Эта статья предлагает довольно хороший обзор различий.

Со страницы:

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

Элемент Button - W3C

Answer 4

Внутри элемента <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

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

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

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

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

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

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

Answer 7

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

Answer 8

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

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

Answer 9

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

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

Answer 10

<button>

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

против

<input type='button'>

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

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