テキスト入力欄の内側に案内を画像で表示する
テキスト入力欄内に最初から薄い文字で案内が表示されていて、クリックしてカーソルを入れると案内文字が消えるフォームをよく見かけます。 例えば下図のようなフォームです。
このようなフォームの作り方は、記事「入力フォームが空のときに入力案内を表示」でご紹介いたしました。
今回は、テキストではなく画像を表示させる下記のようなフォームを作ってみましょう。
上記の入力フォーム内をクリックしてみて下さい。案内画像が消えるはずです。 何も入力しないままフォーム外をクリックすれば、案内画像が再表示されます。 何かを入力してからフォーム外をクリックした場合は、案内画像は消えたままです。
実現方法はとても簡単で、画像「
」を用意して、入力フォーム内に表示させているだけです。 JavaScriptを用いて入力内容を判断し、画像を消したり再表示したりしています。
前回の記事（2本）
※今回ご紹介する入力フォームの作り方は、以下の2つの記事でご紹介した内容をベースにしています。 重複する解説は本記事では省略しています。まだご覧になっていない場合は、先にこれらの記事をお読み頂くと、次ページでご紹介するソースが分かりやすくなると思います。
■入力フォームが空のときに入力案内を表示
入力フォーム内に何も入力されていないときには「検索語を入力」などの入力案内文字を表示させ、入力欄にカーソルが入ったら案内文字が消えるようにしてみましょう。用途が分かりやすい入力欄になるかもしれません。
■テキスト入力欄の内側にアイコンを表示する
無味乾燥なテキスト入力フォームの内側左端にアイコンを表示させてみましょう。検索用の入力欄なら虫眼鏡などの「検索機能」を示すアイコンを表示させることで、役割が分かりやすいテキスト入力フォームになります。
上記の内容を踏まえて、今回の「案内画像付きのテキスト入力欄」を作るソースを書いてみましょう。
