placeholderとは
後から実際の文字や数字などが表示される場所を示すもの。例えば、開発途中に作る中身が何もないサブルーティンや、プレゼンテーションソフトの点線で表されるユーザーの入力すべきテキストボックスなど、さまざまなものがあります。
ここで触れるのはhtml5で導入されたinput要素のplaceholder属性についてです。
これによってフォームの入力欄にプレースホルダを設定できるようになりました。
1 | <input type="text" placeholder="プレースホルダー"> |
と入力することで入力欄に プレースホルダー と表示されます。
こんなやつですね。
placeholder属性を追加するだけで簡単に使えるのですが、ここに何をいれるかが重要になります。
大事な情報を入れない
便利なplaceholderですがブラウザによって挙動が異なります。
IE10, IE11ではフォーカス時に表示が消えます。
Chrome、 Firefox、Safari などでは文字を入力するまで表示され続けます。
また、IE9以下では表示されません。
JavaScriptを使うことで、挙動を揃えたりIE9に対応させたりといったことは可能ですが、フォームのバリデーションと干渉して思い通りに動かない場合があります。
後者の場合、placeholderが消えてしまうと何を入力していいかわかりません。
placeholderは「ヒント」をユーザーに伝えるもので、それがなくてもフォームに何を入力するのか理解できないといけません。
消えてしまってもフォームの入力に支障がない情報をいれましょう。
適切なヒントを与える
例えばカード番号を入力してほしいとき
placeholderには1234-1234-1234-1234とあるのに
実際には1234123412341234と入力しないといけない。
これでは逆効果です。
また、長すぎる文言を入れると入力途中に忘れてしまいます。
重要な情報は先ずplaceholderにいれるべきかどうか考えましょう。
まとめ
良いデザインのフォーム = 良いフォームとは限りません。
ユーザビリティも考えたフォームを作りましょう。