it-swarm.com.ru

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

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

<input type="button" />

вместо:

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

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

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

622
Tamas Czinege

Как примечание, <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"
297
Travis J

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

Со страницы:

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

Элемент Button - W3C

165
Noldorin

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

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

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

41
Santhosh

Котировка

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

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

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

37
user54579

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

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

вход (<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 .

16
Attilio

Цитировать Forms Page в руководстве HTML:

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

16
gimel

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

16
nickomarsa

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

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

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

vs.

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

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

7
Sergey Sklyar

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

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

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

7
jnowland

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

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

6
Moh S.

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

4
Roumelis George

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

3
deadManN