We Blog Weblog

プレースホルダー

Web

2023年2月15日

プレースホルダー

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

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

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

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

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

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

プレースホルダー

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

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

placeholder textfiller textdummy textと同じく「ダミーテキスト(=フォントの見本とかに使う文章)」という意味でも使うようです。

実装

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

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

<textarea>も同様です。

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

プレースホルダーの罠

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

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

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

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

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

悪い例


良い例

まとめ

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

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

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

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

この記事を書いた人
みやの
Web・DTP担当

Contact Us

ご意見、ご相談、料金のお見積もりなど、お気軽にお問い合わせください。

お問い合わせはこちら

TOP