css - para - ¿Qué desventajas hay en la etiqueta<button>?

etiqueta button html (11)

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 etiquetas de entrada con el tipo enviar, con la recomendación de usar <button> 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 <button> , 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.

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

Esto funcionará de manera consistente en todos los navegadores:

<button type="submit">...</button>
<button type="button">...</button>

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

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é anidado dentro de una etiqueta de formulario.

Parece que la razón principal para usar <button> 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.

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 <em> y <img>

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

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

Así que comencé a agregar todo tipo de estos botones, decorados con <img /> 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 etiquetas 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 etiquetas <button> , 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.

También podría encontrarse con estos problemas:

jQuery no puede apuntar al botón (no es culpa de jQuery): <button> en IE7
Varias variables de solicitud si hay> 1 <button> 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, <span> para que funcione.

Tengo experiencia con las peculiaridades de <button> 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 , <a href=''http://example.com''><button></button></a> 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 <button> principalmente como un elemento para hacer clic para su javascript, y está fuera de un formulario, hágalo <button type=''button''> y ¡probablemente esté bien!
De lo contrario: si usa <button> en un formulario, tenga cuidado de que el tipo predeterminado de <button> sea en realidad <button type=''submit''> en (la mayoría) de los casos, así que sea explícito con su tipo y su value , como: <button type=''submit'' value=''1''>Search</button> .

Tenga en cuenta que: al utilizar una clase de imitación de botones, como .btn de Bootstrap, .btn hacer que cosas como <div> o <a> o incluso <button> vean exactamente como usted quiere, y en el caso de <a> 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.

Todo lo que necesita saber: W3Schools <button> 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 etiquetas <button> y </button> , mientras que otros navegadores enviarán el contenido del atributo de valor. Use el elemento de input para crear botones en un formulario HTML.

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

Por el contrario, ningún navegador enviará el formulario cuando se haga clic en <input type="button"/> o <button type="button"/> . Y, naturalmente, todos los navegadores enviarán el formulario cuando se haga clic en los elementos <input type="submit"/> o <button type="submit"/> .

Como dice la respuesta de @ orip, para obtener un comportamiento de envío consistente en los navegadores, siempre use <button type="button" /> o <button type="submit" /> dentro de un elemento <form/> . Nunca dejes fuera el atributo de type .

en lo que a mí respecta, la diferencia entre las etiquetas 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 : <add to cart> product2 : <add to cart> product3 : <add to cart>

entonces podrías hacer esto:

<button name="buy" type="submit" value="product2"> add to cart </button>

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:

<button name="buy" type="submit" value="product2" onclick="this.value=''product2''"> add to cart </button>

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

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 <button> 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 etiquetas <button> y </button> , 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: