入力ボックスの初期値として薄いグレーの文字を表示する
公開日：2014年5月8日
入力フォームのテキストボックスや検索ボックスで、あらかじめ薄いグレーの文字が表示されているケースがあります。入力欄をクリックしたり値を入力すると文字は消えます。そのような初期値を表示しておく方法を解説します。
JavaScriptで実現する方法もありますが、HTML5で導入されたplaceholder属性を使うとはるかに簡単に実現できますので、その方法をとることにします。
現在ではほとんどのブラウザがHTML5対応になっていますので、特殊な事情がない限りこの方法で構わないでしょう。
やり方は、以下の例のようにplaceholder属性で表示する文字列を指定するだけです。
|
1 2 3 4 5 |
<form action="" method="post"> <p><label>電話番号：<br><input type="tel" name="telNumber" placeholder="090-1234-5678"></label></p> <p><label>メールアドレス：<br><input type="email" name="mailAddress" placeholder="info@example.com"></label></p> <p><input type="submit" value="送信"></p> </form> |
上記コードで以下のような表示になります。
グレーの文字の消えるタイミングは、入力欄をクリックしフォーカスをあてた時か、あるいは最初の文字を入力した時です。どちらになるかはブラウザにより異なります。
なお、input要素のtype属性に指定した"tel"と"email"は、HTML5で追加されたものです。
"tel"は"text"と同じようなもので、特にフォーマットのチェックは行いません。
"email"はフォーマットのチェックを行い、@がない時などは送信時にエラーメッセージが表示されます。
スポンサーリンク
