画像を使った送信ボタンを設置する

送信ボタンを画像で設置する

フォームの送信ボタンは通常input要素に「type=”submit”」を指定して設置しますが、ボタンの画像を用意して設置することもできます。

画像を使った送信ボタンは、input要素に「type=”image”」を指定して、通常のimg要素のようにパスやalt属性を指定します。

コード例

<form action="" method="post">
	<div>
		<label for="i_name">お名前</label>
		<input id="i_name" type="text" name="name" value="" placeholder="山田 太郎">
	</div>
	<div>
		<label for="i_furigana">フリガナ</label>
		<input id="i_furigana" type="text" name="furigana" value="" placeholder="ヤマダ タロウ">
	</div>
	<div>
		<label for="t_message">お問い合わせ内容</label>
		<textarea id="t_message" name="message" placeholder="こちらにお問い合わせ内容を入力してください。"></textarea>
	</div>
	<div class="btn_area">
		<input type="image" name="btn_confirm" src="./images/button.png"  alt="次へ" value="次へ" width="67" height="67">
	</div>
</form>

通常の送信ボタンとは少し挙動が異なり、画像を使った送信ボタンはvalue属性の値とあわせてクリック（またはタップ）された位置もデータとして送信します。

送信されたデータ例

["btn_confirm_x"]=> string(2) "66" ["btn_confirm_y"]=> string(2) "34" ["btn_confirm"]=> string(6) "次へ"

name属性に「_x」を付けたものがX座標、「_y」を付けたものがY座標です。
このデータではX軸で「66px」、Y軸で「34px」の位置を押して送信されたことが分かります。