【ホームページ作成】入力フォームが空のときに入力案内を表示

テキスト入力欄に案内文字を表示

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

入力欄にカーソルを入れると案内文字が消える例

このような「案内文字」を表示したり消したりする入力欄は、JavaScriptを活用すると簡単に作れます。 JavaScriptを使えば、入力欄内の文字と装飾（文字色）を自由に変更できるからです。

試しに作ってみた入力フォームを下記に掲載しています。下記の入力欄内をクリックして、カーソルを入れてみて下さい。案内文字が消えるはずです。 何もフォーム内に入力しないまま（ページ内の他の場所をクリックするなどして）カーソルを入力欄外に出せば、案内文字が戻ります。
※JavaScriptが使えないか無効な環境では、案内文字は消えずに入ったままです。

上記のサンプルでは、以下のような動作が行われています。

• カーソルが入ると……
  • 「お問い合わせ番号」という表示を消す
  • 欄内の文字色を黒色（#000000）にする
• （無入力のまま）カーソルが出ると……
  • 「お問い合わせ番号」という文字を表示する
  • 欄内の文字色を灰色（#808080）にする

今回は、このような「入力案内付きのテキスト入力欄」を作る方法をご紹介いたします。

まずは、HTMLとスタイルシートを書きましょう >>

【目次】

1. サンプル （このページ）
2. HTMLとスタイルシートを書く
3. JavaScriptを加える
4. 案内文字の表示・非表示を切り替える
5. 入力欄内の文字色を切り替える
6. ソースのまとめ
7. ソースのまとめ［複数版］