🧊

画像ボタンでよく使う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"のクリック座標なんて誰得なんやろう。