画像ボタンでよく使うinput type="image" と "submit"の違い

画像ボタンでformを送信するには、だいたい以下のパターンが考えられると思います。

type="submit"とCssのbackground-image
type="image"
img要素でJavaScriptから送信
その他要素とCssのbackground-imageでJavaScriptから送信

下2つはもはやなんでもありなので置いておくとして、今回のメインはinput要素のsubmitとimageについて。
input要素のtype="image"は、画像ボタンが設定できるtype="submit"の上位互換！とか思ってた時期が私にもありました。

実際は、ちょっと挙動が違うんですね。

type="submit" と type="image"で画像ボタンを作る場合

その他指定はあると思いますが、これら要素に対して指定しそうなものと、その組み合わせ。

type="submit"

value ->	指定あり	半角スペース	指定なし(=空)
パラメータ	○	○	○
見た目	×	○	○

画像じゃないボタンの場合は、valueに設定した値がラベルとして表示されますよね。
ただ画像をCssであてる場合は、文字が邪魔になります。
画像の上に文字が出ちゃうので、×。

name="submit"のパラメータが必要な場合は、

素直にtype="hidden"を利用する。
text-indent: -9999pxとか、Cssで文字を隠すようにする。
value="" or value=" " とする。　←　空か半角スペース＝どちらも見えない

そうすれば安心。

type="image"

value ->	指定あり	半角スペース	指定なし(=空)
パラメータ	○	○	×
見た目	○	○	○

そしてこっちが落とし穴です。
以下のコードで分かる通り、両者では挙動が異なります。

name="submit"のパラメータが

検証コード

こんなPHPのコードと、

<?php
     var_dump($_POST);
     $submit = (isset($_POST['submit'])) ? 'Yes!' : 'No..';
     echo '$_POST["submit"]: ' . $submit;
?>

このHtmlで検証します。

<pre>
<!-- ↑のPHPのコード -->
</pre>


<form action="/sample.php" method="post" name="formA">
     <input type="text" value="hoge" name="text" />
     <input type="hidden" value="fuga" name="hidden" />
     <input type="submit" value="" name="submit" / style="background-image: url(...);">
</form>


<form action="/sample.php" method="post" name="formB">
     <input type="text" value="hoge" name="text" />
     <input type="hidden" value="fuga" name="hidden" />
     <input type="image" src="sample_40x40.png" value="" name="submit" width="20" height="20" />
</form>

formA

type="submit"でポストした場合は、以下の通り。

array(3) {
  ["text"]=>
  string(4) "hoge"
  ["hidden"]=>
  string(4) "fuga"
  ["submit"]=>
  string(4) "Send"
}
$_POST["submit"]: Yes!

formB

type="image"でポストした場合は、以下の通り。

array(4) {
  ["text"]=>
  string(4) "hoge"
  ["hidden"]=>
  string(4) "fuga"
  ["submit_x"]=>
  string(2) "19"
  ["submit_y"]=>
  string(1) "7"
}
$_POST["submit"]: No..

Oh...

どういうことか

type="image"にしてvalueを設定しなかった場合、nameで指定したパラメータが飛んでこない。
- その代わりになぜか画像のクリックされた座標が飛んでくる。(誰が何に使うんや
よって、type="submit"と同じと思って if(isset($_POST["submit"])){....} みたいな処理をしてるとコケる。

name="submit"のパラメータが必要な場合は、

なんでもいいからvalueを指定する。
素直にtype="hidden"を利用する。

結論

個人的には・・

submitもimageも、GET/POSTのトリガーとしてだけ使って、サーバーサイドの処理の判定ロジックには使わない。
必要なパラメータはhiddenなり他の要素なりで渡す。

にしてもtype="image"のクリック座標なんて誰得なんやろう。