html - semantica - input type="submit" Vs button tag ¿son intercambiables?
web semantica w3c (10)
input type="submit" y button tag 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?
Aunque ambos elementos ofrecen funcionalmente el mismo resultado *, le recomiendo que use <button> :
- Mucho más explícito y legible.
inputsugiere que el control es editable , o puede ser editado por el usuario;buttones mucho más explícito en términos del propósito al que sirve - Más fácil de estilo en CSS; como se mencionó anteriormente, FIrefox e IE tienen peculiaridades en las que la
input[type="submit"]no se visualiza correctamente en algunos casos - Solicitudes predecibles: IE tiene comportamientos muy importantes cuando los valores se envían en la
POST/GETal servidor - Marcador amigable; puede anidar elementos, por ejemplo, iconos, dentro del botón.
- HTML5, con visión de futuro; como desarrolladores, es nuestra responsabilidad adoptar las nuevas especificaciones una vez que se haya oficializado. HTML5, a partir de ahora, ha sido oficial por más de un año, y se ha demostrado en muchos casos para impulsar el SEO .
* Con la excepción de <button type="button" > que por defecto no tiene un comportamiento especificado.
En resumen, desaconsejo encarecidamente el uso de <input type="submit" /> .
El <input type="button"> es solo un botón y no hará nada por sí mismo. El <input type="submit"> , cuando está dentro de un elemento de formulario, enviará el formulario cuando se haga clic.
Otro botón ''especial'' útil es el <input type="reset"> que borrará el formulario.
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. Al hacer clic en un botón Enviar, los datos del formulario se envían a la página web definida por el atributo de acción del elemento.
Al hacer clic en el botón Restablecer, todos los widgets de formulario se restablecerán a su valor predeterminado de inmediato. Desde el punto de vista de UX, esto se considera una mala práctica.
Un clic en un botón de botón no ... ¡nada! Eso suena tonto, pero es increíblemente útil crear botones personalizados con JavaScript.
Mientras que las otras respuestas son excelentes y responden a la pregunta, hay una cosa a considerar cuando se usa input type="submit" y button . Con un input type="submit" no puede usar un pseudo elemento CSS en la entrada pero puede usar un botón.
Esta es una razón para usar un elemento de button sobre una entrada cuando se trata de diseñar.
No sé si esto es un error o una característica, pero hay una diferencia muy importante (por lo menos en algunos casos) que encontré: <input type="submit"> crea un par de valores clave en su solicitud y <button type="submit"> no. Probado en Chrome y Safari.
Por lo tanto, cuando tiene varios botones de envío en su formulario y desea saber en cuál se hizo clic, no use el button , use input type="submit" lugar.
Si está hablando de <input type=button> , no enviará automáticamente el formulario
si está hablando de la etiqueta <button> , es más reciente 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">
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 posibilidades de representación más completas: el elemento BUTTON puede tener contenido. Por ejemplo, un elemento BUTTON que contiene una imagen funciona como y se puede parecer a un elemento INPUT cuyo tipo está configurado en "imagen", pero el tipo de elemento BUTTON permite contenido.
Por lo tanto, solo por funcionalidad son intercambiables.
(No lo olvide, type="submit" es el predeterminado con el button , ¡así que déjelo apagado!)
<button> es más nuevo que <input type="submit"> , es más semántico, fácil de estilizar y admite HTML dentro de él.
<input type=''submit'' /> no admite HTML en su interior, ya que se trata de una etiqueta de cierre automático. <button> , por otro lado, admite 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 de <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, es mejor que se adhiera a <input type=''submit'' /> .
Utilice 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 en varios navegadores
Como práctica recomendada, recomendamos encarecidamente usar el elemento <button> siempre que sea posible para garantizar que coincida con la representación entre navegadores.
Entre otras cosas, hay un error de Firefox que nos impide configurar la altura de línea de los botones <input>, haciendo que no coincidan exactamente con el alto de otros botones en Firefox ".