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

Question

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

Answer 1

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

<input type="submit"> 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.

Answer 2

Un 'botón' es simplemente eso, un botón, al cual puede agregar funcionalidad adicional usando Javascript. Un tipo de entrada 'enviar' tiene la funcionalidad predeterminada de enviar el formulario en el que está ubicado (aunque, por supuesto, todavía puede agregar funcionalidad adicional usando Javascript).

Answer 3

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

Answer 4

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

Answer 5

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

<input type="submit"> deben utilizarse solo en formularios y enviarán una solicitud (GET o POST) a la URL especificada. Deben ponerse no en cualquier lugar HTML.

Answer 6

W3C que quede claro, en la especificación sobre el elemento de botón

botón puede ser visto como una clase genérica para todo tipo de botones con ningún comportamiento predeterminado.

W3C

Answer 7

Cabe también mencionar que una entrada con nombre de type = "submit" se presentó también en conjunto con los campos nombre de la otra forma, mientras que una entrada type = "button", llamada así no lo hará.

Con otras palabras, en el siguiente ejemplo, la entrada de llamada name=button1voluntad no obtener presentará mientras que la entrada llamado name=submit1SE obtener presentará.

Formulario de muestra 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 de la forma anterior:

<?php var_dump($_POST); ?> 

Prueba de lo anterior en su máquina local crear los dos archivos en una carpeta llamada/tmp/test/ejecutar el servidor web PHP incorporado desde shell:

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

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

Uno se preguntaría por qué tendríamos que enviar un botón con nombre? Depende del script de back-end. Por ejemplo, el complemento de WordPress de WooCommerce no procesará una página de Checkout publicada a menos que también se envíe el botón con el nombre Place Order. Si modifica su tipo de envíe a botón, este botón no se enviará y, por lo tanto, el formulario de pago nunca se procesará.

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

Answer 8

type='Submit' está configurado para reenviar & obtener los valores en BACK-END (PHP, .NET, etc.). type='button' reflejará el comportamiento normal de los botones.