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

223

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

html input types bounav
fuente
2
El elemento HTML <botón> no presenta una forma por sí solo, compañero ...
Hexágono Teoría
66
En realidad, lo hace en algunos navegadores. Tener un formulario, sin un botón de envío, sino un <button> que le aplicará la funcionalidad de envío. Firefox tiene este comportamiento.
jishi
Al leer las especificaciones del W3C, este es en realidad un comportamiento predeterminado, ya que los botones tienen un atributo de tipo que por defecto es "enviar".
jishi
2
Ver también input type = "submit" Vs etiqueta de botón ¿son intercambiables?
hippietrail
37
Tenía la misma pregunta y esta definitivamente no es una pregunta estúpida, especialmente si usted ha sido desarrollador de formularios web asp.net toda su vida donde no usamos html regularmente todos los días porque los estúpidos controles asp.net escupen esta mierda para nosotros ... es por eso que terminamos siendo tontos cuando nos mudamos a MVC y tenemos que volver al jardín de infantes para descubrir cómo codificar elementos de formulario simples nuevamente. :)
PositiveGuy

Respuestas:

235

<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.


fuente
42
También los navegadores pueden capturar la pulsación de tecla "Enter" en un formulario y enviar el formulario automáticamente si hay un botón de envío, pero no de otra manera.
Mr. Shiny and New 安 宇
2
También lo hacen si tiene un tipo = "imagen", que se puede utilizar para activar un envío de formulario cuando se hace clic en él.
jishi
55
Shiny and New: los formularios se pueden enviar mediante la tecla Intro sin ningún botón. Es suficiente enfocarse en una entrada de texto, por ejemplo.
Lasar
3
Puede usar elementos de BOTÓN, aunque (sorpresa sorpresa) hay algunos problemas con ellos cuando se usa el Navegador favorito de todos (IE). Aunque vale la pena saberlo.
44
Obviamente, esto es extremadamente antiguo, pero siento la necesidad de dar mis 2 centavos, ya que siento que es una gran desventaja de usar tipos de botones ... el evento de envío de formulario NO se activa desde las presentaciones de JavaScript, lo que lleva a posibles pesadillas de mantenimiento.
mothmonsterman el
20

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).

Aistina
fuente
7

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.

Sujeet Srivastava
fuente
3

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.

Martin Murphy
fuente
3

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.

Eugen Mihailescu
fuente
¿Esto está de acuerdo con las especificaciones o depende del navegador?
Magnus Lind Oxlund
0

<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.


fuente
0

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

Mahfoud Boukert
fuente
0

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.

Shashank Malviya
fuente