仕事でフォームの送信ボタンを画像にする時に困ったのでメモ。
サーバーに「どのボタンを押したか」を送信するため、name属性・value属性を正しく送信しなければいけない、
というケースで考えて下さい。
よくある方法を書いてみる
- <input type=”image”>を使う
- <button><img /></button>
- <a onclick=”form.submit()”><img /></a>
３番目の方法はJavascriptがOFFな時、何もできなくなるのでほとんど使わない（ようにしてる）。
２番目の<button>タグ。
IEでは、<button>?</button>内のHTML要素を全てValue値として送るという致命的なバグがあるので送信ボタンとしてはオススメしない。
このバグは、Javascriptにも影響していて、buttonタグのvalue値はIEのDOMでは正しく取得できない。
参考サイト）
http://ogawa.s18.xrea.com/iedame/form/
私がよく使うのは１番目の<input type=”image”>
ただし、これにも欠点があった。
<input type=”image”>タグ内にvalueを設定する事はできないからだ。
<input type=”image” name=”submit” value=”hoge” src=”***” />
試しにこんな風に送信ボタンを設定して、valueが送信できるか試してみた。
Firefox2,Safari2では確認できたが、
IE5.5-7, Opera9では対応していなかった。
結局、この方法でもダメだった。
○結論
画像の送信ボタンで、どのボタンを押したかを判別するのは、通常のHTMLフォームでは無理。
Javascriptなど絡めないとダメっぽい。
その時はIE対策などクロスブラウジングが重要。
○余談
画像ボタンが一つだけなら、<input type=”hidden” />使えるのですけどね、、、
この投稿にタグはありません。
