¿Qué desventajas hay en la etiqueta ?

Empecé a usar una hoja de estilo de css de diagnóstico, por ejemplo, http://snipplr.com/view/6770/css-diagnostics–highlight-deprecated-html-with-css–more/

Una de las reglas sugeridas resalta las tags de entrada con el tipo enviar, con la recomendación de usar .

Así que comencé a agregar todo tipo de estos botones, decorados con dentro de ellos para que se destaquen. Y todo funcionó muy bien … en Firefox y Chrome.

Luego probé IE6 y obtuve el “se detectó un valor Request.Form potencialmente peligroso”, porque IE6 envía el html dentro del botón, que, en mi caso, tiene tags html. No quiero deshabilitar el indicador validateRequest, porque me gusta este poco de validación de datos.

Entonces escribí algunos javascript para desactivar ese botón antes de que se produjera el envío. Funcionó muy bien en una página de prueba, con un botón, pero cuando lo probé en una página real, que tenía otras tags , estalló de nuevo. Porque IE6 envía TODOS los botones ‘html. Así que ahora tengo todo tipo de código para desactivar los botones antes de enviar.

Los mismos problemas con IE7. IE8 afortunadamente lo ha arreglado.

Yikes. Recomiendo no ir por esta carretera SI está utilizando ASP.NET.

Actualizar:

Encontré una biblioteca que parece prometedora para arreglar esto.

Si usa el script ie8.js de esta biblioteca: http://code.google.com/p/ie7-js/

Podría funcionar bien. El IE8.js pone IE5-7 al día con IE8 con la etiqueta del botón. Hace que el valor enviado sea el valor real y solo se envía un botón.

Al usar siempre especifique el tipo, ya que los navegadores predeterminan diferentes tipos.

Esto funcionará de manera consistente en todos los navegadores:

De esta forma, ganas todas las bondades de , sin inconvenientes.

Todo lo que necesita saber: W3Schools Tag

La etiqueta es compatible con todos los principales navegadores.

Importante: si utiliza el elemento del botón en un formulario HTML, diferentes navegadores enviarán diferentes valores. Internet Explorer enviará el texto entre las tags y , mientras que otros navegadores enviarán el contenido del atributo de valor. Use el elemento de input para crear botones en un formulario HTML.

Pros:

La etiqueta de visualización no tiene que ser la misma que el valor enviado. Ideal para i18n y “Eliminar esta fila”
Puede incluir marcado como y

Contras:

Algunas versiones de MSIE tienen por defecto type="button" lugar de type="submit" por lo que tiene que ser explícito
Algunas versiones de MSIE tratarán todos los s como exitosos, por lo que no se puede decir cuál se hizo clic en un formulario de botón de envío múltiple.
Algunas versiones de MSIE enviarán el texto de la pantalla en lugar del valor real

Una peculiaridad importante a tener en cuenta: en un formulario que contiene un elemento , IE6 e IE7 no enviarán el formulario cuando se haga clic en el elemento . Otros navegadores, por otro lado, enviarán el formulario.

Por el contrario, ningún navegador enviará el formulario cuando se haga clic en o . Y, naturalmente, todos los navegadores enviarán el formulario cuando se haga clic en los elementos o .

Como dice la respuesta de @ orip, para obtener un comportamiento de envío consistente en los navegadores, siempre use o dentro de un elemento

. Nunca dejes fuera el atributo de type .

Está roto o no?

Como de costumbre, la respuesta es ” funciona bien en todos los navegadores principales, pero tiene los siguientes caprichos en IE ” . Sin embargo, no creo que sea un problema para ti.

La etiqueta es compatible con todos los principales navegadores. El único problema de soporte reside en lo que Internet Explorer enviará al presionar un botón.

Los principales navegadores enviarán el contenido del atributo de valor. Internet Explorer enviará el texto entre las tags y , mientras que también presentará el valor de cada uno en el formulario, en lugar de solo el que hizo clic.

Para sus propósitos, solo limpiar el código HTML anterior, esto no debería ser un problema.

Fuentes:

Tengo experiencia con las peculiaridades de ahora, 6 años después, así que aquí están mis sugerencias:

Si aún soportas IE6 o IE7 , ten mucho cuidado con el botón, el comportamiento es muy problemático con esos navegadores, en algunos casos enviando innerHtml en lugar de value = ‘whatever’ y todos los valores de los botones en lugar de solo uno y comportamiento dudoso como ese. Así que pruébelo o evítelo por el bien de los navegadores.
De lo contrario: si todavía está soportando IE8 , no funciona bien, y probablemente cualquier otra cosa donde anide un botón dentro de un elemento seleccionable Así que ten cuidado con eso.
De lo contrario: Si está utilizando un principalmente como un elemento para hacer clic para su javascript, y está fuera de un formulario, hágalo y ¡probablemente esté bien!
De lo contrario: si usa en un formulario, tenga cuidado de que el tipo predeterminado de sea en realidad en (la mayoría) de los casos, así que sea explícito con su tipo y su value , como: .

Tenga en cuenta que: al utilizar una clase de imitación de botones, como .btn de Bootstrap, .btn hacer que cosas como

o o incluso vean exactamente como usted quiere, y en el caso de tener un comportamiento alternativo más útil. No es una mala opción.

TLDR; Está bien usarlo si no te importan los buscadores antiguos, pero Bootstrap proporciona alternativas visuales similares más robustas que vale la pena analizar.

Aquí hay un sitio que explica las diferencias: http://www.javascriptkit.com/howto/button.shtml

Básicamente, la etiqueta de entrada solo permite texto (aunque puede usar una imagen de fondo) mientras que el botón le permite agregar imágenes, tablas, divs y cualquier otra cosa. Además, no requiere que esté nested dentro de una etiqueta de formulario.

También podría encontrarse con estos problemas:

jQuery no puede apuntar al botón (no es culpa de jQuery):
Varias variables de solicitud si hay> 1 s: http://www.peterbe.com/plog/button-tag-in-IE

Otra cosa está relacionada con el estilo con la técnica de puertas correderas : debe insertar otra etiqueta, por ejemplo, para que funcione.

en lo que a mí respecta, la diferencia entre las tags de envío y de botón es la siguiente: le da la opción de mostrar texto diferente al valor del elemento

Supongamos que tiene una lista de productos y luego, al lado de cada producto, desea que se agregue un botón al carrito del cliente:

 product1 :  product2 :  product3 :

entonces podrías hacer esto:

Ahora el problema es que IE enviará el formulario con value = “add to cart” en lugar de value = “product2”

La forma más fácil de resolver este problema es agregando onclick = “this.value = ‘product2′”

Así que esto:

hará el truco en todos los navegadores principales; lo he usado en un formulario con varios botones y funciona con Chrome Firefox e IE

Parece que la razón principal para usar es permitir el marcado de CSS de ese botón y la capacidad de darle un estilo al botón con imágenes: (ver aquí: http://www.javascriptkit.com/howto/button.shtml )

Sin embargo, creo que el enfoque más adoptado que he visto en (X) HTML + CSS es usar un div y darle un estilo completo con imágenes y: pseudoclases de hover (simular la pulsación de un botón … no se puede agregar más de uno enlace por respuesta, así que solo google “botón div” verá muchos ejemplos de esto), y usar javascript para enviar formularios o llamadas AJAX … esto también tiene más sentido si no usa formularios HTML, y hacer todas las presentaciones con AJAX.