入力フォームにヒントを表示する

テキストボックス

テキストボックスに入力ヒントを表示させる場合は、inputタグにplaceholder属性を追加することで入力ヒントを表示させることができます。

<input type="text" placeholder="ヒント">

placeholder属性はあくまで入力のヒントであり、入力しないでフォーム送信をおこなったときに値としては送信されません。もしもフォーム送信したい初期値を設定したいということであればvalue属性に設定をします。

<input type="text" value="初期値">

パスワードボックス

パスワードボックスもテキストボックスと同様にinputタグにplaceholder属性を追加することで入力ヒントを表示させることができます。テキストボックスとはtype属性が異なるだけです。

<input type="password" placeholder="ヒント">

テキストエリア

テキストエリアにもtextareaタグにplaceholder属性を追加することで入力ヒントを表示させることができます。

<textarea placeholder="ヒント"></textarea>

ヒントを改行して表示したいという場合には
を挿入することで改行できます。ただしSafariなどのブラウザで改行されないことがあります。現状ではヒントの改行を簡単に実装できる方法はありません。

<textarea placeholder="ヒント&#13;ヒント"></textarea>

CSSでヒントの文字色を指定する

ヒントの文字色をCSSで指定することができます。inputやtextareaに::placeholderを付けたセレクタを使うことでヒントのデザインが指定できます。ブラウザの仕様で振り回されるよりはCSSで指定しておいたほうが良いかと思います。

input[type="text"]::placeholder,
input[type="password"]::placeholder,
textarea::placeholder{
	color: #aaa;
}