HTML資料一覧

inputタグで画像付送信ボタンを作った時のフォームに送られるx=n&y=nパラメータを省略する方法

2014/08/16更新

対応バージョン: 5

inputタグで以下のように定義すると画像付送信ボタンが作れるが、フォームにデータが送られる際に画像内のマウスポインタの位置を示すx=nとy=nパラメータも一緒に送られる。

<form id="search" method="GET" action="search.cgi">
<input type="text" name="query" />
<input type="image" src="icon.png" />
</form>

送られるパラメータ(例)

query=tokyo&x=20&y=10

(*)マウスクリックでなくキーボードのエンターを押した場合はx=0&y=0となる

この座標の情報が必要ない場合は受け取った側で無視すればいいだけだが、URLの一部として表示されてしまうのでURLをコピーしてメールで送ったりする場合にあまり美しくないし混乱のもとになる。

そこでこれを表示したくない場合は以下のようにJavaScriptで制御すればよい。

(変更前)

<input type="image" src="icon.png" />

(変更後)

<input type="image" src="icon.png"
 onclick="void(this.form.submit()); return(false);" />

こうすることで送られるパラメータは以下のようになる。

query=tokyo