Різниця між <input type = 'submit' /> та <button type = 'submit'> текст </button>

148

Про них існує багато легенд. Я хочу знати правду. Які відмінності між двома наступними прикладами?

<input type='submit' value='text' />
<button type='submit'>text</button>

html button

— Джеймс
джерело

Ви маєте на увазі <input type="submit">і <button type="submit">?

— kennytm

Можливий дублікат різниці між <type type = 'button' /> та <input type = 'submit' />

— Hakan Fıstık

input- недійсний елемент. Не використовуйте <input />, просто використовуйте <input>.

— CDT

@ HakanFıstık, а не копія цього, був там, це (більш-менш тонко) інший, наприклад, type=submitтому що buttonтам навіть не було проблем (можливо, тому, що тоді він навіть не був частиною std. AFAIK), коли було задано інше питання).

— Sz.

Відповіді:

120

Не знаєте, звідки ви берете свої легенди, але:

Кнопка надсилання з `<button>`

Як і в випадку:

<button type="submit">(html content)</button>

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

У вашому прикладі IE6 надсилатиме textна сервер, тоді як більшість інших браузерів нічого не надсилатиме. Щоб зробити його перехресним браузером сумісним, використовуйте <button type="submit" value="text">text</button>. Ще краще: не використовуйте значення, тому що якщо ви додасте HTML, це стає досить складним, що отримано на стороні сервера. Натомість, якщо вам потрібно надіслати додаткове значення, використовуйте приховане поле.

Кнопка с `<input>`

Як і в випадку:

<input type="button" />

За замовчуванням це робить майже нічого. Він навіть не подасть вашу форму. Ви можете розмістити текст лише на кнопці та надати її розмір та рамку за допомогою CSS. Первісний (і поточний) намір полягав у тому, щоб виконати сценарій без необхідності подавати форму на сервер.

Кнопка звичайного надсилання за допомогою `<input>`

Як і в випадку:

<input type="submit" />

Як і колишня, але насправді подає навколишню форму.

Кнопка надсилання зображення за допомогою `<input>`

Як і в випадку:

<input type="image" />

Як і колишня (надіслати), вона також подасть форму, але ви можете використовувати будь-яке зображення. Це раніше був кращим способом використання зображень як кнопок, коли потрібна форма. Для більшого контролю <button>зараз використовується. Це також можна використовувати для карти зображень на стороні сервера, але це рідкість сьогодні. Коли ви використовуєте usemap-attribute та (з цим атрибутом чи без), браузер надсилає на сервер координати вказівника X / Y миші (точніше, розташування вказівника миші всередині кнопки миші, коли ви клацаєте на ньому). Якщо ви просто ігноруєте ці додатки, це не що інше, як кнопка для надсилання, замаскована під зображення.

Існують деякі тонкі відмінності між браузерами, але всі представлять атрибут value, за винятком <button>тегу, як пояснено вище.

— Авель
джерело

Оскільки ви все-таки редагували, то про IE6 все ще вірно з IE11 у режимі примх. (Ще одна причина не використовувати режим примх). Виправлено в Edge. О, і між <input> та <кнопкою> є більше відмінностей: <input> white-space:preза замовчуванням має <button>. Це стає очевидним при спробі зробити кнопку ширшою, ніж вікно перегляду.

— Містер Лістер

З <button>, ви можете використовувати теги img тощо, де є текст

<button type='submit'> text -- can be img etc.  </button>

з <input>типом ви обмежені текстом

— Іскристі
джерело

з <input type="image" />ви не обмежені текстом , і він також виконує уявити.

— Абель

@Abel: це більше для створення карти зображень, яка в свою чергу надсилає позицію вказівника миші як name.xі name.yпараметри (зауважте, що nameпараметр відсутній!). Я вважаю за краще використовувати <input type="submit">фон CSS, якщо єдиною метою є кнопка з фоновим зображенням.

— BalusC

@BalusC: Правда, але це було метою, коли на момент написання стандарту HTML 2.0, коли не було CSS, було, як описано, використовувати зображення як кнопку або як карту зображень на стороні сервера. Але дійсно, ви можете (ab) використовувати звичайну кнопку з фоновим зображенням, щоб зробити те ж саме з CSS та HTML.

— Авель

@Abel: Це ніколи не було наміром input type="image". Для цього <button type="submit">є наміром.

— BalusC

@BalusC: можливо, ми розуміємо стандарт по-різному, але це в оригінальному тексті Лі для стандарту HTML 2.0: " TYPE=IMAGE' implies TYPE = SUBMIT" - обробка; тобто, коли вибрано піксель, подається форма в цілому. " . Зробіть з нього те, що, на вашу думку, є справжнім наміром :)

— Абель

Підсумовуючи:

<input type="submit">

<button type="submit"> Submit </button>

Обидва за замовчуванням візуально намалюють кнопку, яка виконує ту саму дію (надішліть форму).

Однак його рекомендується використовувати, <button type="submit">оскільки він має кращу семантику, кращу підтримку ARIA і її легше стилізувати.

— Хуанма Менендес
джерело

Різниця між <input type = 'submit' /> та <button type = 'submit'> текст </button>

Кнопка надсилання з <button>

Кнопка с <input>

Кнопка звичайного надсилання за допомогою <input>

Кнопка надсилання зображення за допомогою <input>

Кнопка надсилання з `<button>`

Кнопка с `<input>`

Кнопка звичайного надсилання за допомогою `<input>`

Кнопка надсилання зображення за допомогою `<input>`