フォームの送信ボタンをクリックすると、
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;
}
