При просмотре большинства сайтов (включая SO), большинство из них используют:
<input type="button" />
вместо:
<button></button>
- Каковы основные различия между ними, если они есть?
- Есть ли веские причины для использования одного вместо другого?
- Есть ли веские причины использовать их вместе?
<button>
Приходит ли использование с проблемами совместимости, видя, что это не очень широко используется?
html
button
compatibility
html-input
Арон Роттвил
источник
источник
<button>
сейчас?<button />
также имеетform
атрибут (и связанные атрибуты), поэтому он может быть связан с формами в других частях тела документа.Просто как дополнительная заметка,
<button>
будет неявно отправлять, что может вызвать проблемы, если вы хотите использовать кнопку в форме без ее отправки. Таким образом, еще одна причина использовать<input type="button">
(или<button type="button">
)Изменить - подробнее
Без типа
button
неявно получает типsubmit
. Неважно, сколько кнопок отправки или входов есть в форме, любая из них, явно или неявно напечатанная как submit, при нажатии отправит форму.Есть 3 поддерживаемых типа для кнопки
источник
submit
по умолчанию, когда 99,9% форм многоbutton
с однимsubmit
?!Эта статья, кажется, предлагает довольно хороший обзор разницы.
Со страницы:
источник
Внутри
<button>
элемента вы можете поместить контент, например, текст или изображения.В этом разница между этим элементом и кнопками, созданными с помощью
<input>
элемента.источник
<input />
как действительно является пустым элементом, а<button>
некотировка
От: 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:
источник
Используйте кнопку из элемента ввода, если вы хотите создать кнопку в форме. И используйте тег кнопки, если вы хотите создать кнопку для действия.
источник
против
-
в современных браузерах оба элемента легко стилизуются с помощью 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/
источник