プレースホルダー

2023年2月15日

みなさんこんにちは。
ケミストのWeb担当みやのです。

「Web」記事では、これまでに得たWebに関する知識を記録として残していきたいと思います。

今回は「プレースホルダー」について書きます。

プレースホルダーとはなんぞ

プレースホルダーとは、入力欄にあらかじめ記載されている「記入例」のようなものです。

例えばパワーポイントで新しいスライドを作るときの、

この「クリックしてタイトルを入力」がプレースホルダーです。

ちなみにplaceholderは英語で「代理人」「官職者」「代用語」という意味だそうです。

placeholder textはfiller textやdummy textと同じく「ダミーテキスト（＝フォントの見本とかに使う文章）」という意味でも使うようです。

実装

<input>タグのplaceholder属性に内容を書くだけです。

<input type="text" placeholder="プレースホルダー">

<textarea>も同様です。

<textarea placeholder="プレースホルダー"></textarea>

プレースホルダーの罠

参考：U-Site｜入力フォームのプレースホルダーを使ってはいけない

実際に入力してみると分かると思いますが、プレースホルダーは何かを入力すると消えてしまいます。

プレースホルダーを「お名前」とか「電話番号」とか「メールアドレス」にしていると（＝ラベル代わりにしていると）ユーザーが入力している途中で「あれ、今何を入力してたんだっけ？」となってしまいます。

ラベルは入力欄の外側に出して、プレースホルダーはあくまで記入例として使うのがよいそうです。

プレースホルダーが最も生きるのは「電話番号のハイフンがいるのかいらないのか」かなと個人的には思います。

悪い例

良い例

まとめ

・プレースホルダーはあくまで「記入例」

・ラベル代わりに使うべきではない

・ラベルと併用するのが望ましい

次回は「ラベルに変化するプレースホルダー」を作ってみたいと思います。