フォームの送信ボタンをクリックすると、
URL末尾に「x=0&y=0」や「x=20&y=21」といった原因不明のパラメータがついてしまうことがあります。
身に覚えがないですし、困りますよね。
コンテンツ
URLに付与される「x=0&y=0」とは何なのか。
このxとyは「座標」のことで、
x=0とy=0は、クリックした位置の「画像内での座標」を表しています。
ではなぜ座標がURLにくっついているのか。
原因はinput type=”image”
<form> <input type="text"> //フォーム入力欄 <input type="image" src="button.png" alt="送信する"> </form>
input
タグにtype="image"
を指定すると、画像を送信ボタンにすることができます。
このinput type="image"
を使った送信ボタンをクリックすると、
クリックした位置の「画像内での座標」も同時に送信される仕様になっています。
座標は、画像の左上を(0, 0)として決定され、
「x=20&y=21」のようにクリックした位置によって座標の値は変動します。
Enterキーを押して送信した場合は(x, y)=(0, 0)が送信され、
「x=0&y=0」がURLにくっつきます。
フォーム送信時に「x=0&y=0」をつけたくない。
「画像を送信ボタンにしたいけど、座標は送信しなくていい!」
という人が大半だと思いますので、
二つ解決策をご紹介します。
HTML
<button> <img src="button.png" alt="送信"/> </button>
butonタグでimgタグを囲むだけなので、簡単ですね。
2. CSSで背景画像を指定
input type="submit"
として、CSSで背景画像を指定する方法です。
HTML
<form> <input type="text"> //フォーム入力欄 <input type="submit"> //cssで背景画像を指定 </form>
CSS
input[type="submit"]{ width: 50px; height: 50px; border: none; //デフォルトの枠線を削除。 background-image: url("submit-btn.png"); background-color: #fff; background-repeat: no-repeat; //背景画像の繰り返しを無効化。 cursor: pointer; }