Разница между <input type = 'button' /> и <input type = 'submit' />

223

Там нет такой вещи, как глупый вопрос, поэтому здесь мы идем: В чем разница между <input type='button' />и <input type='submit' />?

html input types bounav
источник
2
HTML-элемент <button> не отправляет форму самостоятельно, приятель ...
Hexagon Theory
6
На самом деле, это происходит в некоторых браузерах. Имея форму, без кнопки отправки, но вместо этого <кнопка> будет применять к ней функцию отправки. Firefox имеет такое поведение.
Джиши
При чтении спецификации W3C это на самом деле поведение по умолчанию, так как у кнопок есть атрибут type, который по умолчанию равен «submit».
Джиши
2
См. Также input type = «submit». По сравнению с тегом кнопки они взаимозаменяемы?
hippietrail
37
У меня был тот же вопрос, и это определенно не глупый вопрос, особенно если вы всю жизнь были разработчиком веб-форм asp.net, где мы не используем обычный html день, потому что глупые элементы управления asp.net выкладывают это дерьмо для нас ... вот почему мы в конечном итоге становимся тупыми при переходе на MVC и вынуждены возвращаться в детский сад, чтобы выяснить, как снова закодировать простые элементы формы. :)
PositiveGuy

Ответы:

235

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

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


источник
42
Также браузеры могут регистрировать нажатие клавиши «Ввод» в форме и автоматически отправлять форму, если есть кнопка «Отправить», но не иначе.
Мистер Блестящий и Новый
2
Они также делают это, если у вас есть type = "image", который можно использовать для запуска отправки формы при нажатии.
Джиши
5
Mr. Shiny and New: Формы могут быть отправлены с помощью клавиши ввода без каких-либо кнопок. Например, достаточно сосредоточиться на вводе текста.
Ласар
3
Вы можете использовать элементы BUTTON, хотя (к удивлению) с ними есть несколько проблем при использовании Всеобщего любимого браузера (IE). Хотя стоит знать об этом.
4
Это, очевидно, очень старый процесс, но я чувствую необходимость отдать свои 2 цента, поскольку считаю, что использование типов кнопок приводит к значительному снижению ... событие onsubmit формы НЕ запускается из представлений javascript, что ведет к потенциальным кошмарам обслуживания.
Mothmonsterman
20

«Кнопка» - это просто кнопка, к которой вы можете добавить дополнительные функции, используя Javascript. Тип ввода 'submit' имеет функцию по умолчанию для отправки формы, в которой он находится (хотя, конечно, вы все равно можете добавить дополнительные функции, используя Javascript).

Aistina
источник
7

Кнопка не будет отправлять форму сама по себе. Это простая кнопка, которая используется для выполнения некоторой операции с использованием javascript, тогда как кнопка «Отправить» - это своего рода кнопка, которая по умолчанию отправляет форму всякий раз, когда пользователь нажимает кнопку «Отправить».

Суджит Шривастава
источник
3

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

Мартин Мерфи
источник
3

Следует также отметить, что именованный ввод type = "submit" будет также отправлен вместе с именованными полями другой формы, в то время как именованный ввод type = = button не будет.

Другими словами, в приведенном ниже примере именованный вход 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 не будет обрабатывать опубликованную страницу Checkout, если только не будет Place Orderназвана названная кнопка. Если вы измените его тип от отправки на кнопку, эта кнопка не будет отправлена, и, таким образом, форма Checkout никогда не будет обработана.

Это, вероятно, маленькая деталь, но вы знаете, дьявол кроется в деталях.

Евгений Михайлеску
источник
Это в соответствии со спецификацией или это зависит от браузера?
Магнус Линд Окслунд
0

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

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


источник
0

W3C проясняет, о спецификации об элементе Button

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

W3C

Махфуд Букерт
источник
0

type='Submit'настроен на пересылку и получение значений в BACK-END (PHP, .NET и т. д.). type='button'будет отражать нормальное поведение кнопки.

Шашанк Мальвия
источник