<кнопка> проти <тип вводу = «кнопка» />. Який використовувати?

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

<input type="button" />

замість:

<button></button>

• Які основні відмінності між ними, якщо такі є?
• Чи є поважні причини використовувати один замість іншого?
• Чи є вагомі причини використовувати комбінувати їх?
• Чи використовуються <button>проблеми з сумісністю, оскільки це не дуже широко використовується?

• Ось сторінка з описом відмінностей (в основному ви можете помістити html у a <button></button>)
• І ще одна сторінка, що описує, чому люди уникають <button></button>(Підказка: IE6)

Ще одна проблема IE при використанні <button />:

І поки ми говоримо про IE, у нього є кілька помилок, пов’язаних із шириною кнопок. Це таємниче додасть додаткові накладки, коли ви намагаєтеся додати стилі, тобто вам доведеться додати крихітний хак, щоб все було під контролем.

Так само, як бічна примітка, <button>буде неявно надіслано, що може спричинити проблеми, якщо ви хочете використовувати кнопку у формі, не надсилаючи її. Таким чином, ще одна причина використання <input type="button">(або <button type="button">)

Редагувати - детальніше

Без типу, buttonнеявно отримує тип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, тип якого встановлено на "image", але тип елемента BUTTON дозволяє вміст.

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

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

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

Це різниця між цим елементом і кнопками, створеними за допомогою <input>елемента.

Цитата

Важливо: Якщо ви використовуєте елемент кнопки у формі 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, для типу якого встановлено значення "image", але тип елемента BUTTON дозволяє вміст.

Використовуйте кнопку з елемента введення, якщо ви хочете створити кнопку у формі. І використовуйте тег кнопок, якщо ви хочете створити кнопку для дії.

<button>

• за замовчуванням поводиться так, як якщо б у нього був атрибут "type =" submit "
• можна використовувати без форми, а також у формах.
• Доступний вміст тексту або HTML
• css псевдоелементи дозволено (як: раніше)
• Назва тегу зазвичай унікальна для однієї форми

vs.

<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> . Це також складніше, і стиль не завжди реагує добре у всіх браузерах. Сподіваюся, що це допомогло.

Я просто хочу додати тут щось до решти відповідей. Елементи введення вважаються порожніми або недійсними (іншими порожніми елементами є область, база, br, col, hr, img, введення, посилання, мета та парам. Ви також можете перевірити тут ), тобто вони не можуть мати жодного вмісту. Окрім відсутності вмісту, порожні елементи не можуть мати жодних псевдоелементів, таких як :: after та :: before , що я вважаю головним недоліком.

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

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

Якщо ви не можете зробити це з різних причин, просто пам’ятайте, що додайте атрибут role = ”button” у свій тег як доступний. Ця стаття є досить інформативною: https://www.deque.com/blog/accessible-aria-buttons/