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 como una solución más semántica. Esta es una nueva etiqueta para mí, ¿lo recomiendan, o hay desventajas (como con la compatibilidad del navegador) con las que se ha topado?
Para que quede claro, entiendo la especificación de , tiene un inicio y un final definidos, puede contener varios elementos, mientras que la entrada es singlete y no puede contener cosas. Lo que quiero saber esencialmente es si está roto o no. Entonces, a pesar de nunca haberlo usado antes, me encantaría comenzar a usarlo, simplemente no sé qué tan bien funciona en el mundo real. La primera respuesta a continuación parece implicar que está rota para usos, excepto fuera de formularios, desafortunadamente.
Editar para 2015
¡El paisaje ha cambiado! Tengo 6 años más de experiencia en lidiar con el botón ahora, y los navegadores se han movido de IE6 e IE7. Así que agregaré una respuesta que detalla lo que descubrí y lo que sugiero.
Respondiendo desde una perspectiva ASP.NET.
Estaba emocionado cuando encontré esta pregunta y algunos códigos para un control ModernButton, que, al final, es un control de .
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:
y ![]()
Contras:
type="button"
lugar de type="submit"
por lo que tiene que ser explícito
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. 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.
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:
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.