IEがinput type=imageのvalueを無視する件

既出でしょうけれども・・・。

よく、

<form action="foo.php" method="post">
<input type="submit" name="back" value="戻る">
<input type="submit" name="send" value="送信">
</form>

という感じで、１つのフォーム内にサブミットボタンを複数おいて、押したボタンに応じて処理を分けるということをすると思います。

これは、「戻る」ボタンを押せば、「back=戻る」が、「送信」ボタンを押せば、「send=送信」が、それぞれパラメータとして渡されるので、それによって処理を分岐できるわけです。

ところが、これでサーバーサイドのロジックを組んでおいて、いざ、デザインをかぶせてもらった時に、

<form action="foo.php" method="post">
<input type="image" src="backbtn.png" name="back" value="戻る">
<input type="image" src="sendbtn.png" name="send" value="送信">
</form>

という風に、なっていることがあります。

これはボタンを画像にしてカッコよくしてくれたわけで、デザイナーの方には落ち度はないわけですが、これではIEの場合、先ほどのロジックがほとんど使えなくなってしまいます。

なぜかというと、inputタグにおいて、type="image"の場合、IEでは、先ほどの「back=戻る」や「send=送信」がパラメータとして渡されないからです。。（valueの値が無視される）

これはわりとメジャーなIEのバグ？とはいえ、最初に出くわしたときは、気がつくまで結構なハマりどころだと思います。

ちなみにこれを、サーバーサイドのロジックはそのままで、解決する方法は、JavaScriptなどを使ったりする方法もありますが、IMGタグをBUTTONタグで囲って、

<form action="foo.php" method="post">
<BUTTON name="back" type="submit" value="戻る" Accesskey="b" Tabindex="1">
<img src="backbtn.png" width="50" height="30" alt="戻る"/>
</BUTTON>
<BUTTON name="send" type="submit" value="送信" Accesskey="s" Tabindex="2">
<img src="sendbtn.png" width="50" height="30" alt="送信" />
</BUTTON>
</form>

という感じにするのが、わりと楽な方法だと思います(^^)。