入力ボックスの初期値として薄いグレーの文字を表示する

入力フォームのテキストボックスや検索ボックスで、あらかじめ薄いグレーの文字が表示されているケースがあります。入力欄をクリックしたり値を入力すると文字は消えます。そのような初期値を表示しておく方法を解説します。

JavaScriptで実現する方法もありますが、HTML5で導入されたplaceholder属性を使うとはるかに簡単に実現できますので、その方法をとることにします。
現在ではほとんどのブラウザがHTML5対応になっていますので、特殊な事情がない限りこの方法で構わないでしょう。

やり方は、以下の例のようにplaceholder属性で表示する文字列を指定するだけです。

上記コードで以下のような表示になります。

グレーの文字の消えるタイミングは、入力欄をクリックしフォーカスをあてた時か、あるいは最初の文字を入力した時です。どちらになるかはブラウザにより異なります。

なお、input要素のtype属性に指定した"tel"と"email"は、HTML5で追加されたものです。
"tel"は"text"と同じようなもので、特にフォーマットのチェックは行いません。
"email"はフォーマットのチェックを行い、@がない時などは送信時にエラーメッセージが表示されます。

スポンサーリンク

特集記事

  • WordPress Image

    WordPress の基礎から応用まで
    Webサイト制作ツールとして圧倒的な人気を誇るWordPress。利用するにあたって必要な知識を体系的にまとめた記事です。
  • jQuery Mobile Image

    jQuery Mobile を基本から覚える
    スマホサイト制作に最適なフレームワークの利用方法を解説。DEMOページ・サンプルコードで動作を確認できます。

オンライン講座

Webの基礎マスター講座ページへのリンク


連載講座:WordPressで作る簡単Webサイトページへのリンク

提供しているサービス

WordPressサイト制作出張講座ページへのリンク

WordPress を利用した Webサイト制作の方法を、
あなたのオフィスにうかがいご説明いたします。
料金:¥49,500

サービス詳細ページ >>

申し込みフォーム >>


Webサイト1日公開サービスページへのリンク

一刻も早く Webサイトが必要な方のために、
一緒に作業し1日で公開までもっていきます。
料金:¥49,500

サービス詳細ページ >>

申し込みフォーム >>

スポンサーリンク

ページの先頭へ