Разница между <input type = 'button' /> и <input type = 'submit' />
В чем разница между HTML <input type='button' /> и <input type='submit' />?
У меня был тот же вопрос, и это определенно не глупый вопрос, особенно если вы всю жизнь были разработчиком веб-форм asp.net, где мы не используем обычный html каждый день, потому что глупые элементы управления asp.net выплевывают это дерьмо для нас ... вот почему мы оказываемся тупыми при переходе на MVC и вынуждены возвращаться в детский сад, чтобы снова понять, как кодировать простые элементы формы. :)
Элемент HTML <button> не отправляет форму сам по себе, приятель ...
Собственно, в некоторых браузерах так и есть. Имея форму без кнопки отправки, но вместо этого <button> применит к ней функцию отправки. Firefox имеет такое поведение.
При чтении спецификации W3C это фактически поведение по умолчанию, поскольку кнопки имеют атрибут типа, который по умолчанию имеет значение «отправить».
@moose Я принял ответ Фила Сакре еще в ноябре 2008 года!
@bounav Очень странно. Теперь это показывает, что вы приняли ответ в ноябре 2008 года. Раньше он его не показывал ...
@Jishi: Вы выделили очень хороший момент, о котором в большинстве своем люди не знают. Мы всегда должны указывать type = "button" в элементе <button> при использовании внутри формы, иначе он будет считаться кнопкой отправки.
Отвечает ли это на ваш вопрос? <button> против <input type = "button" />. Что использовать?
Ответы 8
Кнопки <input type = "button" /> не отправляют форму - по умолчанию они ничего не делают. Обычно они используются вместе с JavaScript как часть приложения AJAX.
Кнопки <input type = "submit"> передают форму, в которой они находятся, когда пользователь нажимает на них, если вы не укажете иное с помощью JavaScript.
Также браузеры могут фиксировать нажатие клавиши «Enter» в форме и автоматически отправлять форму, если есть кнопка отправки, но не иначе.
Они также делают это, если у вас есть type = "image", который можно использовать для запуска отправки формы при нажатии.
Мистер Блестящий и Новый: Формы можно отправлять с помощью клавиши ввода без каких-либо кнопок. Например, достаточно сосредоточиться на вводе текста.
Также есть фактический элемент кнопки, который также можно использовать для отправки форм при нажатии. w3.org/TR/REC-html40/interact/forms.html#h-17.5
Вы можете использовать элементы BUTTON, хотя (неожиданный сюрприз) есть несколько проблем с ними при использовании всеобщего любимого браузера (IE). Однако стоит знать об этом.
Это, очевидно, очень старый, но я чувствую необходимость отдать свои 2 цента, поскольку я считаю, что это большой недостаток использования типов кнопок ... событие onsubmit формы НЕ запускается из представлений javascript, что приводит к потенциальным кошмарам обслуживания.
Также обратите внимание, что type = "submit" может быть отправлен, даже если на странице НЕТ формы. В этом случае отправка отправляется по текущему URL-адресу. Это может привести к гоночным условиям, если используется вместе с onclick = "document.location = ...".
Каков механизм отправки информации с помощью кнопки отправки? Я обнаружил, что даже если Javascript отключен, кнопка отправки продолжит действие. Это просто обычный метод публикации, который является поведением кнопки отправки по умолчанию во всех браузерах?
Какой по умолчанию адрес HTTP SUBMIT для <input type = "submit">? В смысле, по какому адресу отправляется ОТПРАВИТЬ?
@KevinMeredith: URL-адрес текущей страницы. А если в форме несколько кнопок отправки, браузер берет первую в DOM.
Источник этого ответа developer.mozilla.org/en-US/docs/Web/HTML/Element/input
«Кнопка» - это всего лишь кнопка, к которой вы можете добавить дополнительные функции с помощью Javascript. Тип ввода «отправить» по умолчанию имеет функцию отправки формы, в которую он помещен (хотя, конечно, вы все равно можете добавить дополнительные функции с помощью Javascript).
<button> без атрибута типа внутри <form> будет вести себя как <input type = "submit">. См. Пример здесь: sign-in-form.glitch.me.
Кнопка не отправляет форму сама по себе. Это простая кнопка, которая используется для выполнения некоторых операций с использованием javascript, тогда как «Отправить» - это своего рода кнопка, которая по умолчанию отправляет форму всякий раз, когда пользователь нажимает кнопку отправки.
Согласно приведенному выше комментарию: <button> без атрибута типа внутри <form> будет вести себя как <input type = "submit">. См. Пример здесь: sign-in-form.glitch.me.
IE 8 фактически использует первую встреченную кнопку отправки или кнопку. Вместо того, чтобы легко указать, что желательно, сделав его типом ввода = отправить, порядок на странице действительно важен.
<input type = "button"> можно использовать где угодно, а не только в форме, и они не отправляют форму, если они находятся в одной. Намного лучше подходит Javascript.
<input type = "submit"> следует использовать только в формах, и они будут отправлять запрос (GET или POST) на указанный URL. Их следует поместить нет в любое место HTML.
W3C проясняет спецификацию элемента Button
Button можно рассматривать как универсальный класс для всех типов кнопок без поведения по умолчанию.
Следует также отметить, что именованный ввод type = "submit" также будет отправлен вместе с именованными полями другой формы, в то время как именованный input 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: // локальный: 3000 и убедитесь сами.
Возникает вопрос, зачем нам отправлять именованную кнопку? Это зависит от внутреннего скрипта. Например, плагин WooCommerce WordPress не будет обрабатывать опубликованную страницу оформления заказа, если также не будет отправлена названная кнопка Place Order. Если вы измените его тип с Разместить на кнопка, эта кнопка не будет отправлена, и, следовательно, форма оформления заказа никогда не будет обработана.
Вероятно, это небольшая деталь, но вы знаете, дьявол кроется в деталях.
Это соответствует спецификации или зависит от браузера?
type='Submit' настроен на пересылку и получение значений на BACK-END (PHP, .NET и т. д.).
type='button' будет отражать нормальное поведение кнопок.
См. Также input type = «submit» против тега кнопки они взаимозаменяемы?