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

Не існує такого поняття, як дурне запитання, тому ми підемо: в чому різниця між <input type='button' />і <input type='submit' />?

<input type="button" />кнопки не надсилають форму - вони за замовчуванням нічого не роблять. Зазвичай вони використовуються разом із JavaScript як частина програми AJAX.

<input type="submit"> кнопки надсилають форму, в якій вони перебувають, коли користувач натискає на них, якщо інше не вказано за допомогою JavaScript.

"Кнопка" - це саме те, кнопка, до якої ви можете додати додаткову функціональність за допомогою Javascript. Тип введення "Надіслати" має функціональні функції за замовчуванням подання форми, в яку він розміщений (хоча, звичайно, ви все ще можете додати додаткову функціональність за допомогою Javascript).

Кнопка не надсилає форму самостійно. Це проста кнопка, яка використовується для виконання певної операції за допомогою javascript, тоді як Submit - це певна кнопка, яка за замовчуванням надсилає форму кожного разу, коли користувач натискає кнопку "submit".

IE 8 фактично використовує першу кнопку, з якою вона стикається з поданням або кнопкою. Замість того, щоб легко вказати, що потрібно, зробивши його типом введення = надіслати замовлення на сторінці насправді важливо.

Слід також зазначити, що іменований вхід типу = "подати" також буде подано разом з назвами полів іншої форми, тоді як названий тип введення = "кнопка" не буде.

Іншими словами, у наведеному нижче прикладі названий вхід name=button1 НЕ буде подано, тоді як названий вхід name=submit1 НЕ буде поданий.

Зразок форми HTML (index.html):

<form action="checkout.php" method="POST">

  <!-- this won't get submitted despite being named -->
  <input type="button" name="button1" value="a button">

  <!-- this one does; so the input's TYPE is important! -->
  <input type="submit" name="submit1" value="a submit button">

</form>

PHP-скрипт (checkout.php), який обробляє дії вищевказаної форми:

<?php var_dump($_POST); ?>

Перевірте вище на локальній машині, створивши два файли у папці з назвою / tmp / test / та запустивши вбудований веб-сервер PHP з оболонки:

php -S localhost:3000 -t /tmp/test/

Відкрийте веб-переглядач за адресою http: // localhost: 3000 і переконайтеся самі.

Можна було б задатися питанням, чому нам потрібно подати названу кнопку? Це залежить від бек-енд-сценарію. Наприклад, плагін WooCommerce WordPress не обробляє опубліковану сторінку оформлення замовлення, якщо також не Place Orderбуде надіслана названа кнопка. Якщо ви зміните його тип від кнопки подання до кнопки, ця кнопка не надсилатиметься, і тому форма оформлення замовлення ніколи не буде оброблена.

Це, мабуть, невелика деталь, але ви знаєте, чорт у деталях.

<input type="button">їх можна використовувати де завгодно, а не лише у формі, і вони не надсилають форму, якщо вони є в одній. Набагато краще підходить Javascript.

<input type="submit">слід використовувати лише у формах, і вони надішлють запит (GET або POST) за вказаною URL-адресою. Їх не слід розміщувати ні в якому місці HTML.

Зрозуміло W3C щодо специфікації елемента Button

Кнопка може розглядатися як загальний клас для всіх типів кнопок без поведінки за замовчуванням.

W3C

type='Submit'встановлюється для переадресації та отримання значень BACK-END (PHP, .NET тощо). type='button'відображатиме нормальну поведінку кнопки.