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

1636

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

<input type="button" />

вместо:

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

Ответы:

663

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

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

Тамас Чинеге
источник
186
Этот ответ был в 2009 году, так как IE6 сейчас мертва, я полагаю, что нет причин не использовать <button>сейчас?
Росди Касим
75
Если они хотят пиратства, пусть получат плохую версию вашего сайта. Удалите IE6, удалите IE7, к сожалению, IE8 по-прежнему нуждается в поддержке.
Джаред
15
Согласно информации Microsoft IE6 Countdown , использование IE6 в Китае все еще увеличивается (по состоянию на январь 2014 года) на уровне около 22%. ie6death.com отмечает, что поддержка IE6 заканчивается 8 апреля 2014 года.
BryanH
54
Как уже говорили многие, пользователи старых версий IE, вероятно, привыкли к Интернету, выглядящему ужасно испорченным.
Jinglesthula
9
<button />также имеет formатрибут (и связанные атрибуты), поэтому он может быть связан с формами в других частях тела документа.
Gup3rSuR4c
327

Просто как дополнительная заметка, <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"
Трэвис Дж
источник
4
Вы можете добавить больше деталей? что произойдет, если есть несколько кнопок? только type = 'submit' делает это?
Simon_Weaver
44
О, дорогой W3C, почему submitпо умолчанию, когда 99,9% форм много buttonс одним submit ?!
2
13
Многие формы также имеют только одну кнопку, которая является отправкой. Полагаю, мне нужно было позвонить так или иначе.
Jinglesthula
5
Это может быть БОЛЬШОЙ гоча! Мой тестовый код отправляется примерно в 80% случаев, иначе он обрабатывался как обычная кнопка. ОСТОРОЖНО при использовании <button> в <form>
Sydwell
4
@ mik01aj "Неважно, сколько кнопок отправки или входов есть в форме, любая из них, которая явно или неявно напечатана как submit, при нажатии отправит форму." Разве это не очевидно? Любая кнопка отправки должна отправить форму. Зачем это говорить? Что мне не хватает?
Бетонные олуша
174

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

Со страницы:

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

Элемент кнопки - W3C

нолдорин
источник
44

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

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

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

Santhosh
источник
4
+1, так <input />как действительно является пустым элементом, а <button>не
Себастьян
39

котировка

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

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

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

user54579
источник
43
@Hawken Эта страница была написана идиотами, которые думали, что W3Schools притворяется W3C. На самом деле, W3Schools не лучше и не хуже, чем тысячи других сайтов, которые занимаются этим видом материалов.
Мистер Листер
на самом деле, это зависит от версии IE и режима IE - w3schools обновил информацию после цитаты
Damien
12
@MrLister Я говорил с людьми, которые думают, что W3Schools связан с W3C. Хотя я не уверен, что согласен с «обязанностью W3Fools предоставлять точную информацию», я думаю, что точность W3Schools оставляет желать лучшего, и что ее критики не обязательно идиоты. (Я многому научился у W3S, когда это было хорошо; это не поспевало за стандартами.)
Marnen Laibow-Koser
17
@MrLister W3Schools - наиболее часто используемый неофициальный источник информации о веб-технологиях. И качество действительно отстой. Почему бы не выделить их? А какие детали W3Fools ошиблись? Все там выглядит правильно для меня.
Марнен Лайбоу-Козер
19

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

Якоря ( <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 .

Аттило
источник
17

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

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

гимель
источник
17

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

nickomarsa
источник
9
Для сценариев на стороне клиента. <input type = "button"> не имеет функции в HTML.
iGEL
12
<button>
  • по умолчанию ведет себя как если бы он имел атрибут "type =" submit "
  • может быть использован без формы, а также в формах.
  • допускается текстовое или html-содержимое
  • разрешены псевдоэлементы css (например, до)
  • имя тега обычно уникально для одной формы

против

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

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

Сергей Скляр
источник
9

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

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

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

jnowland
источник
9

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

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

MattC
источник
re: KjetilNordin - У нас было приложение, которое знало о каких-либо фокусирующих событиях на странице, и одно из них имело место, действие произошло. Таким образом, если вы используете вход, вы можете наблюдать за всеми элементами для одного события. Не говорю, что должен, но ты мог. Риск состоит в том, что кто-то меняет ввод на кнопку, и тогда фокусировка не происходит, и тогда ваше действие не происходит, и тогда ваше приложение развивается. Вот что случилось с нами. :)
MattC
1
использовать события фокуса, когда на элемент в данный момент нацелены мышь или клавиатура. они показывают пользователю, где они находятся в документе.
Альберт
7

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

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

Мох С.
источник
7

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

Румелис Джордж
источник
4

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

deadManN
источник
4

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

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

Настя Макриджанни
источник