<输入类型=‘按钮’>和<输入类型=‘提交’>之间的差异

Question

<输入类型=‘按钮’>和<输入类型=‘提交’>之间的差异没有愚蠢的问题，所以我们来问：<input type='button' />和<input type='submit' />?

Answer 1

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

<input type="submit">当用户单击按钮时，按钮将提交它们所在的表单，除非使用JavaScript指定。

Answer 2

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

Answer 3

还应该提到的是，类型=“Submit”的命名输入也将与其他表单的命名字段一起提交，而命名输入类型=“按钮”则不会。

换句话说，在下面的示例中，命名输入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/的文件夹中创建两个文件，在本地计算机上测试上述内容，然后从shell运行内置PHP Web服务器：

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

打开您的浏览器http://localhost:3000自己看看。

人们可能会想，为什么我们需要提交一个命名按钮？这取决于后端脚本。例如，WooCommerce WordPress插件将不会处理已发布的Checkout页面，除非Place Order命名按钮也提交了。如果您将其类型更改为提交到扣子然后这个按钮将不会被提交，因此签出表单将永远不会被处理。

这可能是一个小细节，但你知道，魔鬼在细节。