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

<input type="image">は、画像を使った「送信ボタン」を作れます。
画像ファイルを使った送信ボタン専用なので、わりと手軽に作ることができます。

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

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

この type="image" で作れるのは送信ボタンだけです。

だから、個人的にはあまり使わないかも。
前回の input type="submit、reset、button や、次回の <button>要素でも画像は使えるし…。

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

type="image" は画像を扱うため、必ずsrc属性、alt属性を使います。
src属性で画像ファイルのURLを、alt属性で画像の代替テキストを指定します。下が基本形です。

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

また、画像ファイルの幅と高さを指定する、width属性、height属性も使います。
width属性、height属性を使ったほうが、先にそのスペースを確保するため、他のテキスト表示が早くなるんだそうです。下が、width属性、height属性も使ったカタチです。

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

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

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

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

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

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

●サンプル1
まずは基本形。必ずsrc属性、alt属性を使います。width属性、height属性も指定しましょう。

記入欄:

<form>
<p>記入欄:<input type="text" name="memo"></p>
<input type="image" src="○○.com/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」と送信されます。

この座標の利用方法…調べたんですが、特にわかりませんでしたー(笑!)
何かおもしろい利用方法があるかと思ったんですが。もし何か分かったら、更新します。
なお、携帯(ガラケー)では座標の観念が無いので、この<input type="image">は、うまく動作しないそうです。

画像の「送信ボタン」を、ロールオーバーで変化させよう

●サンプル2
次は、せっかく画像を使うので、ロールオーバーで画像を変化させてみよう。
インベント・ハンドラ・コンテンツ属性を使って 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">
</form>

<input type="image">内は、本来1行で書くのですが、分かりやすいように改行しています。実際は「半角スペース」でつないで1行で書いてね。
onmouseoverで、マウスがロールオーバー(オン マウスオーバー = 画像の上に乗った)時の画像のURLを指定します。 次にonmouseoutで、ロールアウト(オン マウスアウト)のときの画像のURL。これは最初に src=" " で指定したものと同じヤツ。
onmouseoveronmouseout での URLは「 ' ' (シングルクォート)」で囲んでいるのに注目!
忘れずにね。

このURLは絶対でも相対でもOK。「絶対URL、相対URL」については「[10] 絶対URL と 相対URL」をご覧ください。

次回予告

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

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

関連記事
この記事をはてなブックマークに追加

やる気を保つためにランキングに参加しています。
応援してくださると すっごいやる気を出します! (笑)

初心者にも使いやすい(と思う)レンタルサーバー

最近よく「レンタルサーバーはどこがいい?」とご質問が来ます。
自分でも使っていてオススメなのはミニバード。管理画面がわかりやすくていい感じす。
仕事で使ってるロリポップもわかりやすい管理画面で、初めてでもすんなり使えると思います。
両方とも、なんといっても料金が安いです。初めてだとなるべく安いほうがイイですからね。

それよりちょっと料金は高いけど、高スペックでコスパが良く、信頼性も高いサーバといえば、やはりさくらのレンタルサーバと、XSERVER(エックスサーバー)だと思う。この2つは老舗でユーザーも多いので、質問する場がたくさんあり、初心者の方でもイケるだろうと思います。

レンタルサーバーは、たくさんあり過ぎて迷いますよね。近いうちに、初心者にも良さげなサーバーについて記事にまとめます。*記事をアップしたらココにもリンクを貼ります。

スポンサーリンク

コメントの投稿

スポンサーリンク
最新記事
Category
オススメの本
Links
Calendar
05 | 2017/06 | 07
- - - - 1 2 3
4 5 6 7 8 9 10
11 12 13 14 15 16 17
18 19 20 21 22 23 24
25 26 27 28 29 30 -
Archive
RSS Link
Profile

yuki★hata

Author : yuki★hata
せめて月1回の更新をめざします~。

メールフォームはこちら

スポンサーリンク
スポンサーリンク
Copyright © ほんっとにはじめてのHTML5とCSS3 All Rights Reserved.