Html <input type='button' /> 和 <input type='submit' /> 的区别

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/290215/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-28 22:43:45  来源:igfitidea点击:

Difference between <input type='button' /> and <input type='submit' />

htmlinputtypes

提问by bounav

There is no such thing as a stupid question, so here we go: What is the difference between <input type='button' />and <input type='submit' />?

没有愚蠢的问题,所以我们开始:<input type='button' />和之间有什么区别<input type='submit' />

回答by

<input type="button" />buttons will not submit a form - they don't do anything by default. They're generally used in conjunction with JavaScript as part of an AJAX application.

<input type="button" />按钮不会提交表单 - 默认情况下它们不执行任何操作。它们通常与 JavaScript 结合使用,作为 AJAX 应用程序的一部分。

<input type="submit">buttons will submit the form they are in when the user clicks on them, unless you specify otherwise with JavaScript.

<input type="submit">除非您使用 JavaScript 另行指定,否则按钮将在用户单击时提交它们所在的表单。

回答by Aistina

A 'button' is just that, a button, to which you can add additional functionality using Javascript. A 'submit' input type has the default functionality of submitting the form it's placed in (though, of course, you can still add additional functionality using Javascript).

“按钮”就是一个按钮,您可以使用 Javascript 向其添加其他功能。“提交”输入类型具有提交其所在表单的默认功能(当然,您仍然可以使用 Javascript 添加其他功能)。

回答by Sujeet Srivastava

Button won't submit form on its own.It is a simple button which is used to perform some operation by using javascript whereas Submit is a kind of button which by default submit the form whenever user clicks on submit button.

按钮不会自己提交表单。它是一个简单的按钮,用于通过使用 javascript 执行一些操作,而提交是一种默认情况下每当用户单击提交按钮时提交表单的按钮。

回答by Martin Murphy

IE 8 actually uses the first button it encounters submit or button. Instead of easily indicating which is desired by making it a input type=submit the order on the page is actually significant.

IE 8 实际上使用它遇到的第一个按钮提交或按钮。通过将其设置为输入类型=提交,而不是轻松地指示需要哪个页面上的订单实际上很重要。

回答by Eugen Mihailescu

It should be also mentioned that a named input of type="submit" will be also submitted together with the other form's named fields while a named input type="button" won't.

还应该提到的是,type="submit" 的命名输入也将与其他表单的命名字段一起提交,而命名输入 type="button" 则不会。

With other words, in the example below, the named input name=button1WON'Tget submitted while the named input name=submit1WILLget submitted.

换句话说,在下面的示例中,命名输入name=button1不会被提交,而命名输入name=submit1被提交。

Sample HTML form (index.html):

示例 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>

The PHP script (checkout.php) that process the above form's action:

处理上述表单操作的 PHP 脚本 (checkout.php):

<?php var_dump($_POST); ?>

Test the above on your local machine by creating the two files in a folder named /tmp/test/ then running the built-in PHP web server from shell:

通过在名为 /tmp/test/ 的文件夹中创建两个文件,然后从 shell 运行内置的 PHP Web 服务器,在本地计算机上测试上述内容:

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

Open your browser at http://localhost:3000and see for yourself.

http://localhost:3000 上打开浏览器并亲自查看。

One would wonder why would we need to submit a named button? It depends on the back-end script. For instance the WooCommerce WordPress plugin won't process a Checkout page posted unless the Place Ordernamed button is submitted too. If you alter its type from submitto buttonthen this button won't get submitted and thus the Checkout form would never get processed.

有人会想为什么我们需要提交一个命名按钮?这取决于后端脚本。例如,WooCommerce WordPress 插件不会处理发布的结帐页面,除非Place Order也提交了命名按钮。如果您将其类型从提交更改为按钮,则不会提交此按钮,因此永远不会处理结帐表单。

This is probably a small detail but you know, the devil is in the details.

这可能是一个小细节,但你知道,细节决定成败。

回答by Shashank Malviya

type='Submit'is set to forward & get the values on BACK-END (PHP, .NET etc). type='button'will reflect normal button behavior.

type='Submit'设置为转发并获取 BACK-END 上的值(PHP、.NET 等)。 type='button'将反映正常的按钮行为。

回答by Shashank Malviya

<input type="button">can be used anywhere, not just within form and they do not submit form if they are in one. Much better suited with Javascript.

<input type="button">可以在任何地方使用,而不仅仅是在表单中使用,如果它们在一个表单中,它们就不会提交表单。更适合与Javascript.

<input type="submit">should be used in forms only and they will send a request (either GET or POST) to specified URL. They should notbe put in any HTML place.

<input type="submit">应仅在表单中使用,它们将向指定的 URL 发送请求(GET 或 POST)。他们应该不是放在任何HTML地方。

回答by Mahfoud Boukert

W3C make it clear, on the specification about Button element

W3C 明确了,关于 Button 元素的规范

Button may be seen as a generic class for all kind of Buttons with no default behavior.

Button 可以被看作是所有没有默认行为的 Button 的通用类。

W3C

W3C