コメント：HTML5で多くの興味深い新機能が導入されています。 HTMLに反映されているものもあれば、JavaScript APIであるものもあり、そのすべてが非常に便利です。私のお気に入りの機能の1つは、テキストボックスのプレースホルダープロパティ（入力）です。
プレースホルダープロパティを使用すると、テキストボックスに迅速な情報を表示できます。テキストボックスに情報を入力すると、迅速な情報が非表示になります。この効果は数え切れないと見たことがあるかもしれませんが、それらのほとんどはJavaScriptに実装されており、HTML5はネイティブサポートを提供し、うまく機能します！
HTMLコード
また、あなたがする必要があるのは、テキストボックスの宣言ラベルにプレースホルダー属性を追加することだけです。この効果を作成するためにJavaScriptはまったく必要ありません。
ブラウザがプレースホルダー属性をサポートするかどうかを確認します
プレースホルダーは新しいプロパティであるため、ブラウザがサポートしているかどうかを確認する必要があります。たとえば、IE6とIE8は間違いなくサポートされていません。
function hasplacholdersupport（）{
var input = document.createelement（ 'input'）;
return（ 'placeholder' in input）;
}
ユーザーのブラウザがプレースホルダー機能をサポートしていない場合は、Mootools、Dojo、またはその他のJavaScriptツールを使用して実装する必要があります。
/* Mootools ftw！ */
var firstnamebox = $（ 'first_name'）、
message = firstNameBox.get（ 'Placeholder'）;
firstnamebox.addevents（{
フォーカス：function（）{
if（firstnamebox.value == message）{searchbox.value = ''; }
}、
Blur：function（）{
if（firstnamebox.value == ''）{searchbox.value = message; }
}
}）;
CSSでプレースホルダーを美しくします
さらなる研究の間に、私は別の興味深いCSS機能を発見しました：入力プレースホルダー効果を美化するCSS。単純なCSSコードを使用して、テキストボックスのプレースホルダーテキストを美化させてください。
CSSコード
Firefoxブラウザでの使用法は、Google Chromeの使用とは異なります。彼らの名前は理解しやすい：
/* 全て */
:: -webkit-input-placeholder {color：＃f00; }
:: -Moz-Placeholder {color：＃f00; } / * firefox 19+ * /
：-ms-input-placeholder {color：＃f00; } / * ie * /
入力：-moz-placeholder {color：＃f00; }
/ *個人：webkit */
＃field2 :: -webkit-input-placeholder {color：＃00f; }
＃field3 :: -webkit-input-placeholder {color：＃090;背景：lightgreen;テキスト変換：大文字; }
＃field4 :: -webkit-input-placeholder {font-style：Italic;テキスト装置：オーバーライン;レター間隔：3px;色：＃999; }
/ *個人：Mozilla */
＃field2 ::-moz-placeholder {color：＃00f; }
＃field3 ::-moz-placeholder {color：＃090;背景：lightgreen;テキスト変換：大文字; }
＃field4 ::-moz-placeholder {font-style：Italic;テキスト装置：オーバーライン;レター間隔：3px;色：＃999; }
プレースホルダーテキストのフォント、色、スタイルを制御できます。テキストボックスのプレースホルダーをアニメーション化して表示することもできます。テキストボックスを美化することは小さく見えるものですが、インタラクティブなWebサイトの中には、成功の鍵は詳細にあります。現在、IE10はプレースホルダーのみをサポートしています。私はますます多くの人々がこのネイティブのプレースホルダー効果を使用すると信じています。