<кнопка> против <тип ввода = «кнопка» />. Какой использовать?

Как примечание, <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 может имеют содержание. Например, КНОПКА элемент, содержащий изображение функции, подобные и могут напоминать INPUT, тип которого установлен в "образ", но тип элемента BUTTON позволяет контент.

Элемент Button - W3C

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

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

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

Цитата

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

<button>

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

против.

<input type='button'>

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

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

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

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

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

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

В HTML используется для создания кнопок в форме HTML. Внутри тега вы можете разместить контент, например текст или изображения. Но это не относится к кнопкам, созданным с помощью тега.

HTML-тег

Он используется для создания кнопки внутри HTML-формы и внутри тега, вы можете размещать контент, такой как текст или изображения. Кнопка HTML Submit автоматически отправляет форму по клику. Используя HTML-формы, вы можете легко принять пользовательский ввод. Тег используется для ввода данных пользователем путем добавления элементов формы. Атрибут type используется для добавления кнопки внутри тега.

Короткий ответ заключается в том, что кнопка ведет себя по-разному в IE6/7 по сравнению с другими браузерами, тогда как кнопка ввода ведет себя одинаково во всех браузерах.