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

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

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

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

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

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

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

スポンサーリンク

ページの先頭へ