ホームページ作成/フォームの活用・装飾 (HTML,CSS,JavaScript)

未記入の入力フォームに案内画像を表示する

入力フォーム内に何も入力されていないとき、フォームの内側に案内用の画像が表示されるようにしてみましょう。入力欄にカーソルが入ったら案内画像は消えるようにします。文字だけよりも凝ったデザインにできます。

西村 文宏

執筆者:西村 文宏

ホームページ作成ガイド

テキスト入力欄の内側に案内を画像で表示する

テキスト入力欄内に最初から薄い文字で案内が表示されていて、クリックしてカーソルを入れると案内文字が消えるフォームをよく見かけます。 例えば下図のようなフォームです。

サンプル:

このようなフォームの作り方は、記事「入力フォームが空のときに入力案内を表示」でご紹介いたしました。
今回は、テキストではなく画像を表示させる下記のようなフォームを作ってみましょう。

サンプル:

上記の入力フォーム内をクリックしてみて下さい。案内画像が消えるはずです。 何も入力しないままフォーム外をクリックすれば、案内画像が再表示されます。 何かを入力してからフォーム外をクリックした場合は、案内画像は消えたままです。

実現方法はとても簡単で、画像「案内用画像」を用意して、入力フォーム内に表示させているだけです。 JavaScriptを用いて入力内容を判断し、画像を消したり再表示したりしています。

前回の記事(2本)

※今回ご紹介する入力フォームの作り方は、以下の2つの記事でご紹介した内容をベースにしています。 重複する解説は本記事では省略しています。まだご覧になっていない場合は、先にこれらの記事をお読み頂くと、次ページでご紹介するソースが分かりやすくなると思います。

入力フォームが空のときに入力案内を表示
入力フォーム内に何も入力されていないときには「検索語を入力」などの入力案内文字を表示させ、入力欄にカーソルが入ったら案内文字が消えるようにしてみましょう。用途が分かりやすい入力欄になるかもしれません。

テキスト入力欄の内側にアイコンを表示する
無味乾燥なテキスト入力フォームの内側左端にアイコンを表示させてみましょう。検索用の入力欄なら虫眼鏡などの「検索機能」を示すアイコンを表示させることで、役割が分かりやすいテキスト入力フォームになります。

上記の内容を踏まえて、今回の「案内画像付きのテキスト入力欄」を作るソースを書いてみましょう。

それでは、実現するソースを書きましょう >>

  • 1
  • 2
  • 次のページへ

あわせて読みたい

あなたにオススメ

    表示について

    カテゴリー一覧

    All Aboutサービス・メディア

    All About公式SNS
    日々の生活や仕事を楽しむための情報を毎日お届けします。
    公式SNS一覧
    © All About, Inc. All rights reserved. 掲載の記事・写真・イラストなど、すべてのコンテンツの無断複写・転載・公衆送信等を禁じます