type type = "Подати" теги кнопок Vs - вони взаємозамінні?

233

input type="submit"і buttonтег вони взаємозамінні? або якщо є якась різниця, то коли використовувати input type="submit"та коли button?

І якщо немає різниці, то чому ми маємо 2 теги з однаковою метою?

— Житендра Вяс
джерело

4

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

— hippietrail

Уникайте смішного дня під час використання, buttonа valueатрибут у деякій версії IE, inputпросто надішлете те, що ви очікували, якась версія IE не добре грає з buttons.

— Рубенс Маріуццо

Відповіді в основному такі ж , як для input type="button"проти button type=button: stackoverflow.com/questions/469059 / ...

— Чіро Сантіллі郝海东冠状病六四事件法轮功

Чи відповідає це на ваше запитання? <кнопка> проти <тип вводу = "кнопка" />. Який використовувати?

— leonheess

131

http://www.w3.org/TR/html4/interact/forms.html#h-17.5

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

Тож для функціональності вони взаємозамінні!

(Не забудьте, type="submit"це за замовчуванням button, тому залиште його!)

— MatTheCat
джерело

7

Будьте обережні, IE6 подає значення всіх кнопок на сторінці, що ускладнює визначення точно, на яку кнопку було натиснуто. Пояснення: vancelucas.com/blog/ie6-and-multiple-button-submit-elements

— Sam

6

Просто FYI ви не повинні використовувати type="submit"з допомогою кнопки, за замовчуванням для typeце submit.

— синхронізація

8

Це те, що говорить W3C, але я впевнений, що я бачив випадки, коли typeбув дефолт button. Я вважаю за краще викладати кожен атрибут, щоб уникнути непослідовності браузера.

— MatTheCat

5

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

— EKanadily

2

@chharvey, жоден перший може не мати дочірніх вузлів; тобто нетекстовий контент. Я гадаю, ви могли б сказати, що окрім стислості це не є причиною існування останньої.

— Пол Дрейпер

71

Це <input type="button">просто кнопка і нічого не зробить сама по собі. The<input type="submit">, Коли всередині елемента форми, буде відправити форму при натисканні.

Ще одна корисна "спеціальна" кнопка - <input type="reset">це очищення форми.

— програміст
джерело

5

Питання про тег кнопок не <input type = "button">

— Caltor

7

Питання про <input>та <button>теги. Ви надали корисну інформацію <input>у своїй відповіді, але її немає <button>.

— Pmpr

43

Використовуйте тег <кнопка> замість <введення типу = "кнопка" ..> . Це рекомендована практика в завантажувальній службі 3.

http://getbootstrap.com/css/#buttons-tags

"Візуалізація між браузером

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

Крім усього іншого, є помилка Firefox, яка заважає нам встановлювати висоту рядка кнопок <input> на основі, що призводить до того, що вони точно не відповідають висоті інших кнопок Firefox. "

— rolfk
джерело

4

+1 для цього. buttonнабагато чіткіше і поєднується з ariaфункціями доступності, і їх набагато простіше в стилі. Це також перспективне мислення, як це HTML5.

— користувач1429980

37

Хоча обидва елементи функціонально дають однаковий результат *, я настійно рекомендую використовувати<button> :

Набагато чіткіше і легше для читання. inputприпускає, що елемент керування може редагуватися або може редагуватися користувачем; buttonнабагато чіткіше з точки зору мети, якій вона служить
Простіше в стилі CSS; як було сказано вище, FIrefox та IE мають химерність, в якій input[type="submit"]у деяких випадках не відображаються правильно
Передбачувані запити: IE має поведінку, коли значення подаються в POST/ GETзапит на сервер
Розмітка-зручна; ви можете вкласти елементи, наприклад, іконки, всередині кнопки.
HTML5, перспективне мислення; як розробники, ми несемо відповідальність за прийняття нової специфікації після її офіційного оформлення. HTML5, на даний момент, є офіційним вже більше року, і це було показано у багатьох випадках для підвищення SEO .

* _{За винятком яких за замовчуванням не має визначеної поведінки.<button type="button">}

Підсумовуючи це, я дуже відштовхую від використання<input type="submit" /> .

— користувач1429980
джерело

Дякую. Я шукав це, особливо для семантичної точки HTML5. У 2020 році ми повинні думати понад чисту функціональність.

— pierre_loic

27

<input type='submit' />не підтримує HTML всередині нього, оскільки це єдиний тег, що самозакривається. <button>, З іншого боку, підтримує HTML, зображення і т.д. всередині , тому що це пара тегів: <button><img src='myimage.gif' /></button>. <button>також є більш гнучким, коли справа стосується стилів CSS.

Недоліком <button>є те, що він не повністю підтримується старими браузерами. Наприклад, IE6 / 7 не відображає його правильно.

Якщо у вас немає певних причин, то, мабуть, найкраще дотримуватися цього <input type='submit' />.

— Джаред Нг
джерело

1

Відповідь була від 2 років тому. Крім того, дуже можливо вказати альтернативний текст кнопки:<input type="submit" value="Log In" />

— Джаред Нг

2

@nailer Ви абсолютно маєте право на свою думку, але будь-яка відповідь неминуче посилається на сучасний стан технологій. Можливо, HTML 6 знеціниться <button>на користь чогось нового. Чи означає це, що ми взагалі не повинні згадувати конкретний тег у відповідях, оскільки він може змінитися в якийсь момент у майбутньому? Я вважаю за краще залишити це як вправу для читача, щоб визначити, як відповіді стосуються їхньої ситуації. Поки інформація цінна для читача, я не бачу проблеми в її включенні.

— Джаред Нг

1

На момент написання відповіді IE6 / 7 вже застарів. Новий веб-розробник, який читає вашу публікацію, не перевіряючи ваші підтримуючі аргументи і не розуміючи, що вони більше не застосовуються, вважає, що є вагомі причини не використовувати елементи "кнопки".

— mikemaccana

2

@nailer Не існує універсального "застарілого" списку браузерів, якого дотримуються всі. Різні робочі місця мають різні вимоги до підтримуваних браузерів. Тільки тому, що ваш стандарт "підтримуваних браузерів" у 2011 році не включав IE6 / 7, не означає, що так відбувається скрізь.

— Джаред Нг

1

Я усвідомлюю, що не існує універсального списку "застарілих" браузерів - отже, не кожен згадує таке. Все, що я говорю, - це можна сказати як "IE6 / 7 не підтримує кнопку відображення правильно. Якщо це турбує, дотримуйтесь введення" Тобто, ви знаєте, що браузери зміниться, це врахуйте. Це зупиняє можливість StackOverflow назавжди призупинятись при обходженні IE6.

— mikemaccana

14

Я розумію, що це старе питання, але я знайшов це на mozilla.org і думаю, що це стосується.

Кнопка може бути трьох типів: подати, скинути або кнопку. Клацання кнопки надсилання надсилає дані форми на веб-сторінку, визначену атрибутом дії елемента.

Клацання кнопкою скидання негайно скидає всі віджети форми до їх значення за замовчуванням. З точки зору UX, це вважається поганою практикою.

Клацання на кнопку кнопки не робить ... нічого! Це звучить нерозумно, але надзвичайно корисно створювати спеціальні кнопки з JavaScript.

https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Forms/My_first_HTML_form#And_a_<button>_to_finish

— Jere.me
джерело

Чим це корисно, якщо він нічого не робить?

— Мед

4

Тому що ви можете підключити обробників до події клацання через Javascript

— fonso

@Honey, наприклад, ви можете кодувати a, <button type="button">щоб перейти слайдер / карусель до наступного слайда.

— chharvey

11

<button>новіше <input type="submit">, більш семантичний, його легко стилізувати та підтримувати HTML всередині нього.

— Аказ Суза
джерело

8

Хоча інші відповіді чудові і відповідають на питання, є одне, що слід враховувати при використанні input type="submit"та button. З допомогою input type="submit"ви не можете використовувати псевдоелемент CSS на вході, але ви можете на кнопку!

Це одна з причин використовувати buttonелемент над входом, коли справа стосується стилізації.

— L84
джерело

3

Я не знаю, чи це помилка чи особливість, але я знайшов дуже важливу (принаймні для деяких випадків) різницю, яку я знайшов: <input type="submit">створює пару ключових значень у вашому запиті та<button type="submit"> ні. Тестували в Chrome і Safari.

Тож, коли у вас є кілька кнопок для надсилання у формі та хочете дізнатися, на яку клацали - не користуйтеся button, використовуйте input type="submit"натомість.

— Іван Ярич
джерело

з мого досвіду його абсолютно навпаки, кнопка передає $ _POST ["submit_name"], а введення НЕ. випробуваний на хромі. Firefox завжди надсилає $ _POST ["submit_name"].

— Gall Annonim

@GallAnnonim, можливо, це залежить від типу документа. Тому що я точно використовую type type = submit, і він працює на chrome

— Іван Ярич

зацікавлення ... Я використав <! DOCTYPE html> використання lang "pl" && кодування utf-8, якщо це робить різницю. хром - 58.0.3029.96

— Gall Annonim

-2

Якщо ви говорите про <input type=button> це, форма автоматично не надсилатиме форму

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

Підсумок, якщо ви хочете, щоб форма надіслала натисканням у всіх браузерах, використовуйте <input type="submit">

— ДарилЧимко
джерело

14

Ви можете використовувати <button type="submit">для автоматичного надсилання форм.

— jumpnett