Corretta gestione di submit formato immagine da Internet Explorer

Internet Explorer gestisce fuori standard l'invio dei bottoni submit delle form, in particolare quando sono presenti submit in formato immagine e in numero superiore a uno.
Di seguito analizzo diversi esempi di invio, provali con vari browser e varie versioni di IE per vedere le differenze.
Io ho provato con i seguenti browser: Internet Expolorer 6, 7, 8, Firefox 3.5, Opera 10, Chrome 3.0.195, Safari 4.0
In tutti i casi ho usato nel codice HTML name="submitX" e value="submitvalueX" il comportamento corretto del browser sarebbe quello di inviare in POST le giuste coppie nome/valore ma come vedremo non è sempre così...


1) metodo con submit normali (<input type=submit>) NOTA: usabile solo per bottoni testuali ed il valore visualizzato deve per forza coincidere con il "value"


Codice:
<form id="form1" method="post" action="">
<input type="submit" name="submit1" value="submitvalue1" />
<input type="submit" name="submit2" value="submitvalue2" />
</form>

Browser Esito
Internet Expolorer 6.0.2900.2180 ok
Internet Expolorer 7.0.5730.13 ok
Internet Expolorer 8.0.6001.18702 ok
Firefox 3.5.3 ok
Opera 10.00 (build 1750) ok
Chrome 3.0.195.20 ok
Safari 4.0.2(530.19.1) ok


2) metodo con submit imagemap (<input type=image>)


Codice:
<form id="form2" method="post" action="">
<input type="image" src="img1.gif" name="submit1" value="submitvalue1" />
<input type="image" src="img2.gif" name="submit2" value="submitvalue2" />
</form>

Browser Esito
Internet Expolorer 6.0.2900.2180 nel POST compaiono solo gli oggetti "<name>_x" e "<name>_y" con le coordinate del click e non il value
es:
  [submit1_x] => 43
  [submit1_y] => 18
Internet Expolorer 7.0.5730.13
Internet Expolorer 8.0.6001.18702
Opera 10.00 (build 1750)
Firefox 3.5.3 ok
Chrome 3.0.195.20 ok
Safari 4.0.2(530.19.1) ok


3) metodo con submit button testuale (<button type=submit>)


Codice:
<form id="form3" method="post" action="">
<button type="submit" name="submit1" value="submitvalue1">submit1 testo libero</button>
<button type="submit" name="submit2" value="submitvalue2">submit2 testo libero</button>
</form>

Browser Esito
Internet Expolorer 6.0.2900.2180 nel POST viene passato come value "l'innerHTML" del button (come fosse una textarea)
es:
  [submit1] => 'submit1 testo libero'
vengono inviati nel POST tutti i bottoni presenti nella form e non solo quello premuto
Internet Expolorer 7.0.5730.13 ok
Internet Expolorer 8.0.6001.18702 ok
Firefox 3.5.3 okok
Opera 10.00 (build 1750) okok
Chrome 3.0.195.20 okok
Safari 4.0.2(530.19.1) okok


4) metodo con submit button con dentro immagine (<button type=submit> e <img> interna)


Codice:
<form id="form4" method="post" action="">
<button type="submit" name="submit1" value="submitvalue1"><img src="img1.gif" alt="submit1" /></button>
<button type="submit" name="submit2" value="submitvalue2"><img src="img2.gif" alt="submit2" /></button>
</form>

Browser Esito
Internet Expolorer 6.0.2900.2180 nel POST viene passato come value "l'innerHTML" del button (come fosse una textarea)
es:
  [submit1] => '<img src="img1.gif">'
vengono inviati nel POST tutti i bottoni presenti nella form e non solo quello premuto
Internet Expolorer 7.0.5730.13 ok
Internet Expolorer 8.0.6001.18702 ok
Firefox 3.5.3 okok
Opera 10.00 (build 1750) okok
Chrome 3.0.195.20 okok
Safari 4.0.2(530.19.1) okok


5) metodo con submit normali e immagini gestite via CSS (<input type=submit>)

Questa è la soluzione migliore che funziona correttamente con tutti i browser e permette anche bottoni grafici.
Sfrutto un mix del metodo Phark standard per la sostituzione del testo con immagini, più una variante specifica per Explorer che usa l'underscore hack.
NOTA: l'underscore hack anche se formalmente corretto non permette di superare la validazione CSS ufficiale W3C.


Codice:
<style type="text/css">
.submit_image {
	background-repeat: no-repeat;
	overflow: hidden;
	border: none;
	cursor: pointer;
	text-indent: -9999px;
	_text-indent: 0px;
	_padding-left: 9999px;
}
</style>

<form id="form5" method="post" action="">
<input type="submit" name="submit1" value="submitvalue1" class="submit_image" style="background-image: url(img1.gif); width: 100px; height: 35px;" />
<input type="submit" name="submit2" value="submitvalue2" class="submit_image" style="background-image: url(img2.gif); width: 100px; height: 35px;" />
</form>

Browser Esito
Internet Expolorer 6.0.2900.2180 ok
Internet Expolorer 7.0.5730.13 ok
Internet Expolorer 8.0.6001.18702 ok
Firefox 3.5.3 ok
Opera 10.00 (build 1750) ok
Chrome 3.0.195.20 ok
Safari 4.0.2(530.19.1) ok

www.wergio.com

Valid XHTML 1.0 Transitional