<button> versus <input type = "image">

Question

Esto es para un control de "Agregar a la cesta" para el cual uno de mis colegas ha diseñado un buen gráfico. Obviamente, debe generar una solicitud posterior, que un hipervínculo simple no va a hacer.

Amazon lo logra utilizando una entrada de imagen. Pero ¿cuáles son los pros y los contras de

<input type="image" src="atb.png" alt="Add to Basket" /> 

frente

<button type="submit"><img src="atb.png" alt="Add to Basket" /></button> 

(y el uso de CSS para controlar la apariencia)?

supongo que se reduce a estas preguntas:

• ¿Todos los navegadores, gráficas y no gráficas, tener éxito en su deber de hacer entradas imagen accesible desde el teclado? (O, en el caso de dispositivos sin teclado, hacerlos accesibles por cualquier medio de entrada que sea?)

• ¿Qué navegadores existen que no son compatibles con <button>?

• ¿Qué otras ventajas/desventajas hay de cada uno?

• ¿Hay algún otro enfoque posible con sus propias ventajas (además de olvidarlo y simplemente usar un envío simple)?

Answer 1

Ellos deben ser equivalentes. Por motivos de diseño, creo que las etiquetas de botones son más flexibles si cambia las cosas en el futuro.

Pero: IE tiene un error/función donde el valor de un botón o entrada se establece para igualar el innerHTML. Esto puede causar problemas si su código del lado del servidor necesita que este sea un valor particular.

A menos que necesite la flexibilidad adicional de estilo <button> ir con <input type="image"> por lo que no es necesario para hacer frente a las peculiaridades de IE.

Answer 2

Tipo de entrada = "Imagen" es compatible con el atributo Deshabilitado y el navegador se grisá la imagen para usted. Con Type = Button tendrías que proporcionar una imagen gris alternativa.