HTML | フォーム内に薄い文字で入力例を表示する方法
HTMLのフォーム内に薄い文字で入力例を表示する方法とサンプルコードを紹介しています。
フォーム内に入力例を表示する
HTMLの入力フォームには「placeholder（プレースホルダー）」属性を利用することでフォーム内に入力例を表示する事が可能です。
「placeholder」属性で指定した値は、未入力の入力フォーム内に薄い文字色で表示され、入力が開始さえると非表示になる仕様となっています。
以下は「placeholder」属性を指定した入力フォームのサンプルコードです。
<input type="text" name="name" placeholder="入力例：やまだ">以下は上記入力フォームのHTMLコードを実際に表示しています。
「placeholder」属性で表示するデータの色を含むスタイルは「placeholder」セレクタとしてCSSで指定する事が可能です。
ブラウザのデフォルトで「placeholder」属性は薄い灰色は指定されていますが、フォームの色などに合わせて調節します。
input {
placeholder {
color: #FFF000;
}
}