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

Question

Questo è per un controllo "Aggiungi al carrello" per il quale uno dei miei colleghi ha progettato una bella grafica. Ovviamente dovrebbe generare una richiesta di posta, che un semplice collegamento ipertestuale non ha intenzione di fare.

Amazon lo raggiunge utilizzando un input di immagine. Ma quali sono i pro ei contro di

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

contro

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

(e usando i CSS per controllare l'aspetto)?

immagino che si riduce a queste domande:

• fare tutti i browser, grafici e non grafici, riescono nella loro dovere di rendere gli ingressi di immagini tastiera accessibile? (O, nel caso di dispositivi senza tastiera, renderli accessibili con qualsiasi mezzo di ingresso è?)

• Quali browser sono lì che non supportano <button>?

• Quali altri vantaggi/svantaggi ci sono di ciascuno?

• Esistono altri possibili approcci con i propri vantaggi (oltre a dimenticarlo e utilizzare semplicemente un invio semplice)?

Answer 1

Essi dovrebbero essere equivalenti. Per motivi di stile, trovo che i tag dei pulsanti sono più flessibili se cambi le cose in futuro.

Ma: IE presenta un bug/funzionalità in cui il valore di un pulsante o di un input è impostato su uguale a innerHTML. Questo può causare problemi se il tuo codice lato server ha bisogno che questo sia un valore particolare.

A meno che non sia necessaria la flessibilità di stile aggiuntiva di <button>, andare con <input type="image"> in modo da non dover affrontare le stranezze di IE.

Answer 2

Tipo di input = "Immagine" supporta l'attributo Disabilitato e il browser visualizzerà l'immagine in grigio. Con Type = Button dovresti fornire un'immagine grigia alternativa.