placeholderとは

後から実際の文字や数字などが表示される場所を示すもの。例えば、開発途中に作る中身が何もないサブルーティンや、プレゼンテーションソフトの点線で表されるユーザーの入力すべきテキストボックスなど、さまざまなものがあります。
ここで触れるのはhtml5で導入されたinput要素のplaceholder属性についてです。
これによってフォームの入力欄にプレースホルダを設定できるようになりました。

と入力することで入力欄に プレースホルダー と表示されます。

こんなやつですね。

placeholder属性を追加するだけで簡単に使えるのですが、ここに何をいれるかが重要になります。

大事な情報を入れない

便利なplaceholderですがブラウザによって挙動が異なります。
IE10, IE11ではフォーカス時に表示が消えます。
Chrome、 Firefox、Safari などでは文字を入力するまで表示され続けます。
また、IE9以下では表示されません。
JavaScriptを使うことで、挙動を揃えたりIE9に対応させたりといったことは可能ですが、フォームのバリデーションと干渉して思い通りに動かない場合があります。

フォーム1：

フォーム2：

後者の場合、placeholderが消えてしまうと何を入力していいかわかりません。
placeholderは「ヒント」をユーザーに伝えるもので、それがなくてもフォームに何を入力するのか理解できないといけません。
消えてしまってもフォームの入力に支障がない情報をいれましょう。

適切なヒントを与える

例えばカード番号を入力してほしいとき
placeholderには1234-1234-1234-1234とあるのに
実際には1234123412341234と入力しないといけない。
これでは逆効果です。
また、長すぎる文言を入れると入力途中に忘れてしまいます。
重要な情報は先ずplaceholderにいれるべきかどうか考えましょう。

まとめ

良いデザインのフォーム ＝ 良いフォームとは限りません。
ユーザビリティも考えたフォームを作りましょう。