[49-11] input要素で画像の送信ボタンを作ろう (image)

<input type="image">は、画像を使った「送信ボタン」を作れます。
画像ファイルを使った送信専用ボタンなので、CSSで設定するより手軽に作ることができます。
この type="image" で作れるのは送信ボタンだけ。リセットボタンや汎用ボタンには使えませんので要注意です。

こんな ↑ ふうにマウスオーバーで画像を変化させる事もできます。
これはCSSでなく、インベント・ハンドラ・コンテンツ属性の onmouseover属性と onmouseout属性を使っています。（後半で説明↓）

	type属性の値	部品の役割
<input>要素で作る 画像の送信ボタン部品	type="image"	画像による送信ボタン

画像なので必ず src属性・alt属性と一緒に使います

type="image" は画像ファイルを使うので、必ずsrc属性、alt属性を使います。
src属性で画像ファイルのURLを、alt属性で画像の代替テキストを指定します。
alt属性に書いておくテキストは、何かの理由で画像が表示されない時に表示されるので、ユーザーが送信ボタンが見えないなんてコトを防ぎます。

下が基本形です。

<input type="image" src="image/sample.jpg"  alt="送信する">

URLは絶対パスでも相対パスでもOK。
URLについては [10] 絶対URL と 相対URL（絶対パス と 相対パス）をご覧ください。

また、画像の幅と高さを指定する、width属性・height属性も用意されています。
これは必須じゃなく、CSSの widthプロパティ・heightプロパティを使ってもOK。
幅と高さの指定が無くてもちゃんと表示される（画像サイズを自動で認識して表示する）んですが、指定したほうが、前もってスペースを確保するため、後続の表示が早くなる...んだそうです。（気が付かないほどの一瞬が早くなる程度でしょうねえ）

下が、width属性、height属性も使ったカタチです。単位はピクセルと決まっているので、単位無しの数値のみで指定します。下は 幅 200px、高さ40px の例です。

<input type="image" src="image/sample.jpg"  alt="送信する" width="200" height="40">

ほかの属性で機能を追加できます

ここで使える属性は、前回の <input type="submit"> と同じモノです。
（各属性については、それぞれのリンクで詳細をご覧ください。）

• 同時に複数の「送信ボタン」を使うときは、必ず name属性で部品名を指定しておきます。
• autofocus属性で、HTML文書のロード後すぐに「フォーカス（記入のための選択）」する
• form属性で <form>要素の外に出してレイアウトする
• disabled属性で「使用不可」にする

submit では、 <form>で指定した設定を上書きする属性があります。

• formaction属性で <form>の action属性を上書きする
• formmethod属性で <form>の method属性を上書きする
• formenctype属性で <form>の enctype属性を上書きする
• formtarget属性で <form>の target属性を上書きする
• formnovalidate属性で <form>で novalidate属性を使用していない（=バリデートする）状態のとき、送信ボタンのほうで「ノーバリデート（バリデート無し）」にする事ができます。

type="image" で画像の「送信ボタン」を作ろう

まずは基本形で作ったサンプルです。必ずsrc属性、alt属性を使います。
width属性、height属性も指定してみました。

記入欄：

<form>
  <p>記入欄：<input type="text" name="memo"></p>
  <input type="image" src="image/sample.jpg"  alt="送信する" width="200" height="40">
</form>

クリックした座標も送信される

上のサンプルの記入欄に、例えば「ほんと」と書いて送信ボタンを押した後、ブラウザのアドレスバーを見てください。

サイトのURLの直後に「?」で連結されて「memo=ほんと」と送信されていますが、
そのあと「&」で連結されて「x=数字&y=数字」という値も送信されています。
（最後の#image...は気にしないで。サンプルフォームをこのページ内のid=image...の場所に戻るように指定しただけなので）

これは座標。単位はピクセルですね。
画像ボタンの左上を基点にして、x(横位置)、y(縦位置)の クリックされた位置がフォームの内容と一緒に送信されます。
<input type="image"> はこういう仕様なんだって。
なお、クリックせずに「Enterキー」等を押して送信した場合は「x=0&y=0」と送信されます。

JavaScriptで、マウスオーバーで変化させよう

次は、せっかく画像を使うので、マウスオーバーで画像を変化させてみよう。
インベント・ハンドラ・コンテンツ属性を使って JavaScriptを追加してみました。
画像も2コ（平常時のと、マウスオーバー時のを）用意します。

記入欄：

<form>
  <p>記入欄：<input type="text" name="memo"></p>
  <input type="image" src="../img/sample.jpg" 
onmouseover="this.src=' ../img/sample-2.jpg' " 
onmouseout="this.src='../img/sample.jpg' "
alt="送信する" width="200" height="40">
<!--見やすいように改行しています。本来は「半角スペース」でつないで1行で書きます-->
</form>

onmouseover（オン マウスオーバー = 画像の上に乗った）で、マウスオーバー時の画像のURLを指定します。
次にonmouseout（オン マウスアウト）のときの画像のURL。
onmouseover、onmouseout での URLは文字列なので「 ' ' (シングルクォート)」で囲みます。

<input>要素の 索引ページ

<input>要素は「type属性の値」でいろいろなフォームの部品になります。
今回の「画像の送信ボタン」の部品以外は、下記の一覧をご覧ください。

• <input>要素の type属性の値一覧

<input>要素は、type属性以外にもたくさんの属性があり、それによってフォーム部品に機能などを加えられます。詳しくは下記の一覧をご覧ください。

• <input>要素の 他の属性一覧

次回予告

さて今回で、<input>要素がやっと終わりました〜！
<input>は「type属性の値」でたっくさん部品が作れるので、長かったですね〜。

次回は、<button>要素です。これは「ボタン専用」の要素です。
画像でボタンを作れたり、テキストと画像を組み合わせてボタンにできたりと、<input>要素のボタンと比べたら自由度が高いです。
「送信」「リセット」「汎用ボタン」全部に対応しています。