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

Question

没有一个愚蠢的问题,所以我们走了:<input type='button' />和之间的区别是什么<input type='submit' />？

Answer 1

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

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

Answer 2

"按钮"就是一个按钮,您可以使用Javascript添加其他功能."提交"输入类型具有提交其放置的表单的默认功能(当然,您仍然可以使用Javascript添加其他功能).

Answer 3

Button不会自行提交表单.它是一个简单的按钮,用于通过使用javascript执行某些操作,而Submit是一种按钮,默认情况下,只要用户点击提交按钮,就会提交表单.

Answer 4

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

换句话说，在下面的示例中，命名输入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 插件不会处理发布的结账页面，除非Place Order指定的按钮也被提交。如果您将其类型从提交更改为按钮，则该按钮将不会被提交，因此结账表单将永远不会被处理。

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