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

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

<input type="button" />

вместо:

<button></button>

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

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

Еще одна проблема IE при использовании <button />:

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

Просто как дополнительная заметка, <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

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

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

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

котировка

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

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

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

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

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

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

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

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

<button>

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

против

<input type='button'>

• Тип должен быть установлен на «представить», чтобы вести себя как отправляющий элемент
• может использоваться только в формах.
• разрешен только текстовый контент
• нет псевдоэлементов 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>является гибким в том, что он может содержать HTML. Более того, стилизация с использованием CSS намного проще, и стилизация применяется во всех браузерах. Тем не менее, есть некоторые недостатки, касающиеся Internet Explorer (Eww! IE!). Internet Explorer не определяет атрибут значения должным образом, используя содержимое тега в качестве значения. Все значения в форме отправляются на серверную часть независимо от того, нажата кнопка или нет. Это делает использование этого как <button type="submit">хитрый и боль.

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

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

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

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

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