HTMLテキストボックスで未入力時に表示する説明文（プレースホルダー）を設定する方法
HTMLページで、文字が入力されていないテキストボックスの背景に説明の文字列を表示するコードを紹介します。
概要
テキストボックスで文字が入力されていない場合に、そのテキストボックスの意味を説明するため、テキストボックスの背景に説明の文字列を表示したいことがあります。
具体的な例では、gmailの検索ボックスなどがあります。検索ボックスに文字が入力されていない場合「メールを検索」の文字列が表示されます。
検索ボックスに文字列を入力すると、説明の文字列は非表示になり、入力された文字列がテキストボックスに反映されます。
書式
テキストボックスで文字列が未入力の場合に背景に文字列を表示するには、
Placeholder 属性を利用します。
<input type="text" placeholder="(背景部分に表示する文字列)" />
例
コード
下記のHTMLファイルを準備します。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<p>プレースホルダーのテストです</p>
<input type="text" placeholder="IDを入力" />
<input type="text" placeholder="検索できます" />
</body>
</html>
解説
placeholder 属性に設定したい文字列を記述します。今回のHTMLファイルではテキストボックスを2つ配置しています。
一つ目のテキストボックスにはプレースホルダとして「IDを入力」の文字を表示し、もう一つは「検索できます」の文字列を表示します。
表示結果
上記のHTMLファイルを表示します。下図のページが表示されます。
テキストボックスの背景に
placeholder属性で設定した文字列がグレーの文字色で表示されます。
テキストボックスに文字列を入力します。プレースホルダの文字列が非表示になります。
テキストボックスに入力されている文字列をすべて消去すると、プレースホルダの文字列が再表示されます。
テキストボックスが空欄の時にテキストボックスの背景に説明の文字列を表示できました。
補足 : Internet Explorer での表示
先のHTMLをInternet Explorerで表示したときの画面です。IEでもPlaceholder属性に設定した文字列がテキストボックスの背景に表示できています。
著者
iPentecのメインデザイナー
Webページ、Webクリエイティブのデザインを担当。PhotoshopやIllustratorの作業もする。
最近は生成AIの画像生成の沼に沈んでいる。
