input type = "submit" Vs etiqueta de botón ¿son intercambiables?

input type="submit"y la buttonetiqueta son intercambiables? o si hay alguna diferencia, ¿cuándo usar input type="submit"y cuándo button?

Y si no hay diferencia, ¿por qué tenemos 2 etiquetas para el mismo propósito?

http://www.w3.org/TR/html4/interact/forms.html#h-17.5

Los botones creados con el elemento BUTTON funcionan igual que los botones creados con el elemento INPUT, pero ofrecen mayores posibilidades de representación: el elemento BUTTON puede tener contenido. Por ejemplo, un elemento BUTTON que contiene una imagen funciona como y puede parecerse a un elemento INPUT cuyo tipo se establece en "image", pero el tipo de elemento BUTTON permite contenido.

¡Entonces, para la funcionalidad, solo son intercambiables!

(No lo olvide, type="submit"es el valor predeterminado con button, ¡así que déjelo apagado!)

El <input type="button">es solo un botón y no hará nada por sí mismo. El <input type="submit">, cuando dentro de un elemento de formulario, se envía el formulario cuando se hace clic.

Otro botón 'especial' útil es el <input type="reset">que borrará el formulario.

Use la etiqueta <button> en lugar de <input type = "button" ..> . Es la práctica recomendada en bootstrap 3.

http://getbootstrap.com/css/#buttons-tags

"Representación entre navegadores

Como práctica recomendada, recomendamos utilizar el elemento <button> siempre que sea posible para garantizar una representación coincidente entre navegadores.

Entre otras cosas, hay un error de Firefox que nos impide establecer la altura de línea de los botones basados ​​en <input>, lo que hace que no coincidan exactamente con la altura de otros botones en Firefox ".

Aunque ambos elementos ofrecen funcionalmente el mismo resultado *, le recomiendo que use<button> :

• Mucho más explícito y legible. inputsugiere que el control sea editable o que el usuario pueda editarlo; buttones mucho más explícito en términos del propósito al que sirve
• Más fácil de diseñar en CSS; como se mencionó anteriormente, FIrefox e IE tienen peculiaridades en las que input[type="submit"]no se muestran correctamente en algunos casos
• Solicitudes predecibles: IE tiene comportamientos muy distintos cuando los valores se envían en la solicitud POST/ GETal servidor
• Marcado amigable; Puede anidar elementos, por ejemplo, iconos, dentro del botón.
• HTML5, con visión de futuro; Como desarrolladores, es nuestra responsabilidad adoptar la nueva especificación una vez que se oficialice. HTML5, a partir de ahora, ha sido oficial durante más de un año, y en muchos casos se ha demostrado que impulsa el SEO .

* _{Con la excepción de que por defecto no tiene un comportamiento especificado.<button type="button">}

En resumen, desaconsejo el uso de<input type="submit" /> .

<input type='submit' />no admite HTML dentro de él, ya que es una sola etiqueta de cierre automático. <button>, Por el contrario, soporta HTML, imágenes, etc. dentro porque es un par de etiquetas: <button><img src='myimage.gif' /></button>. <button>También es más flexible cuando se trata de estilo CSS.

La desventaja <button>es que no es totalmente compatible con navegadores antiguos. IE6 / 7, por ejemplo, no lo muestra correctamente.

A menos que tenga alguna razón específica, probablemente sea mejor atenerse <input type='submit' />.

Me doy cuenta de que esta es una vieja pregunta, pero encontré esto en mozilla.org y creo que se aplica.

Un botón puede ser de tres tipos: enviar, restablecer o botón. Un clic en un botón de envío envía los datos del formulario a la página web definida por el atributo de acción del elemento.

Un clic en un botón de reinicio restablece todos los widgets de formulario a su valor predeterminado inmediatamente. Desde el punto de vista de UX, esto se considera una mala práctica.

Un clic en un botón no hace ... ¡nada! Eso suena tonto, pero es increíblemente útil crear botones personalizados con JavaScript.

https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Forms/My_first_HTML_form#And_a_<button>_to_finish

<button>es más nuevo que <input type="submit">, es más semántico, fácil de estilizar y admite HTML dentro de él.

Si bien las otras respuestas son geniales y responden la pregunta, hay una cosa a tener en cuenta al usar input type="submit"y button. Con un input type="submit"no se puede usar un pseudo elemento CSS en la entrada, ¡pero se puede usar un botón!

Esta es una razón para usar un buttonelemento sobre una entrada cuando se trata de estilo.

No sé si esto es un error o una característica, pero hay una diferencia muy importante (al menos en algunos casos) que encontré: <input type="submit">crea un par de valores clave en su solicitud y <button type="submit">no lo hace. Probado en Chrome y Safari.

Entonces, cuando tiene varios botones de envío en su formulario y desea saber en cuál se hizo clic, no lo use button, en su input type="submit"lugar , úselo.

Si está hablando <input type=button>, no enviará automáticamente el formulario

Si está hablando de la <button>etiqueta, es más nueva y no se envía automáticamente en todos los navegadores.

En pocas palabras, si desea que el formulario se envíe al hacer clic en todos los navegadores, use <input type="submit">