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

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

Ответ 1

Кнопки

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

Кнопки

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

Ответ 2

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

Ответ 3

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

Ответ 4

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

Ответ 5

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

Другими словами, в приведенном ниже примере именованный вход name=button1 WILL NOT будет отправлен, пока будет отправлен именованный вход name=submit1 WILL.. p >

Пример формы 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 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 и убедитесь сами.

Можно было бы задаться вопросом, почему нам нужно отправить именованную кнопку? Это зависит от внешнего сервера script. Например, плагин WooCommerce WordPress не будет обрабатывать страницу проверки, если не будет отправлена кнопка с именем Place Order. Если вы измените его тип с отправить на кнопку, тогда эта кнопка не будет отправлена, и поэтому форма выписки не будет обработана.

Это, вероятно, небольшая деталь, но вы знаете, дьявол находится в деталях.

Ответ 6

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

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

Ответ 7

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

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

W3C

Ответ 8

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

Ответ 9

Многие из ответов здесь смутили меня. Говорят, что кнопка не имеет действия по умолчанию, что неверно. Возможно, это имело место когда-то, но по состоянию на май 2019 года:

Из W3C: https://www.w3.org/TR/html401/interact/forms.html#edef-BUTTON, "type = submit | button | reset... Этот атрибут объявляет тип кнопки. Возможные значения: submit: Создает кнопку отправки. Это значение по умолчанию. "
От MDN: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button:

Элементы <button> намного проще стилизовать, чем элементы <input>. Вы можете добавить внутреннее содержимое HTML (например, <em>, <strong> или даже <img>) и использовать псевдоэлемент :: after и :: before для достижения сложного рендеринга, в то время как <input> принимает только атрибут текстового значения,

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

Больше примечаний о типе ввода отправки:

Кнопки <input type = "submit"> используются для отправки форм. Если вы хотите создать пользовательскую кнопку, а затем настроить поведение с помощью JavaScript, вам нужно использовать <input type = "button"> или, что еще лучше, элемент <button>.

Если вы решите использовать элементы <button> для создания кнопок в вашей форме, имейте это в виду: если внутри <form> только одна кнопка <button>, эта кнопка будет обрабатываться как кнопка "отправить". Таким образом, вы должны четко указывать, какая кнопка является кнопкой отправки.

Есть ряд других отличий, которые вы можете увидеть при сравнении на сайтах MDN https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/submit и https://developer. mozilla.org/en-US/docs/Web/HTML/Element/button. Например, элемент ввода input поддерживает 5 атрибутов, а также разделяет атрибуты типа <input>. Элемент button поддерживает многое другое.

And- последняя, но не least- кнопка может быть установлена в качестве типа "кнопка" или "сброс", помимо действия по умолчанию, которое (например, тип ввода отправки) - отправка формы.