テキスト入力欄を作るHTMLを書く
まずは、HTMLでテキスト入力欄を作ります。その際、JavaScriptで制御するために、以下の2つのルールでinput要素を記述します。- プレースホルダとして表示したい内容は、title属性の値として記述しておく。
- プレースホルダ機能を使う場所には、class="placeholder"の記述を加える。
例えば、6個のテキスト入力欄を用意してそれぞれにプレースホルダを表示したい場合は、以下のようにHTMLソースを記述します。
項目1：<input value="" title="数値1を入力" class="placeholder" type="text"> 項目2：<input value="" title="数値2を入力" class="placeholder" type="text"> 項目3：<input value="" title="数値3を入力" class="placeholder" type="text"> 項目4：<input value="" title="数値4を入力" class="placeholder" type="text"> 項目5：<input value="" title="数値5を入力" class="placeholder" type="text"> 項目6：<input value="" title="数値6を入力" class="placeholder" type="text">上記のソースでは、6個のinput要素を使って6個のテキスト入力欄を作っています。プレースホルダとして表示したい文字列をtitle属性の値として指定し、プレースホルダ機能の適用対象であることを示すためにclass属性に値「placeholder」を加えてあります。title属性の値は自由に書き換えて下さい。
上記のソースを表示すると、以下のように見えます。
項目1：
項目2：
項目3：
項目4：
項目5：
項目6：
ここではまだtitle属性とclass属性を記述しただけなので、プレースホルダとしては何も表示されません。項目2：
項目3：
項目4：
項目5：
項目6：
次に、title属性の値をプレースホルダの文字列として使うためのJavaScriptソースを記述しましょう。
