Diferencia entre <input type = 'button' /> y <input type = 'submit' />

No existe una pregunta estúpida, así que aquí vamos: ¿Cuál es la diferencia entre <input type='button' />y <input type='submit' />?

<input type="button" />los botones no enviarán un formulario; no hacen nada de forma predeterminada. Generalmente se usan junto con JavaScript como parte de una aplicación AJAX.

<input type="submit"> los botones enviarán el formulario en el que se encuentran cuando el usuario haga clic en ellos, a menos que especifique lo contrario con JavaScript.

Un 'botón' es solo eso, un botón, al que puede agregar funcionalidad adicional usando Javascript. Un tipo de entrada 'enviar' tiene la funcionalidad predeterminada de enviar el formulario en el que se colocó (aunque, por supuesto, aún puede agregar funcionalidad adicional usando Javascript).

El botón no enviará el formulario por sí solo. Es un botón simple que se utiliza para realizar algunas operaciones mediante el uso de JavaScript, mientras que Enviar es un tipo de botón que, de forma predeterminada, envía el formulario cada vez que el usuario hace clic en el botón Enviar.

IE 8 en realidad usa el primer botón que encuentra enviar o botón. En lugar de indicar fácilmente qué se desea al convertirlo en un tipo de entrada = enviar el pedido en la página es realmente significativo.

También debe mencionarse que una entrada con nombre de type = "submit" también se enviará junto con los campos con nombre del otro formulario, mientras que una entrada con nombre type = "button" no.

En otras palabras, en el ejemplo a continuación, la entrada con nombre name=button1 NO se enviará mientras que la entrada con nombre name=submit1 SE ENVIARÁ.

Ejemplo de formulario 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>

El script PHP (checkout.php) que procesa la acción del formulario anterior:

<?php var_dump($_POST); ?>

Pruebe lo anterior en su máquina local creando los dos archivos en una carpeta llamada / tmp / test / luego ejecute el servidor web PHP integrado desde el shell:

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

Abra su navegador en http: // localhost: 3000 y compruébelo usted mismo.

Uno se preguntaría por qué necesitaríamos enviar un botón con nombre. Depende de la secuencia de comandos de fondo. Por ejemplo, el complemento WooCommerce WordPress no procesará una página de pago publicada a menos que también se envíe el Place Orderbotón con nombre. Si modifica su tipo de enviar a botón , este botón no se enviará y, por lo tanto, el formulario de Pago nunca se procesará.

Este es probablemente un pequeño detalle, pero ya sabes, el demonio está en los detalles.

<input type="button">se pueden usar en cualquier lugar, no solo dentro del formulario y no envían el formulario si están en uno. Mucho mejor con Javascript.

<input type="submit">debe usarse solo en formularios y enviarán una solicitud (GET o POST) a la URL especificada. Deben no pueden poner en cualquier lugar de HTML.

W3C deja en claro, en la especificación sobre el elemento Button

El botón puede verse como una clase genérica para todo tipo de botones sin comportamiento predeterminado.

W3C

type='Submit'está configurado para reenviar y obtener los valores en BACK-END (PHP, .NET, etc.). type='button'reflejará el comportamiento normal del botón.