概要
入力欄が空のときだけ薄いグレーで表示され、入力を始めると消える文字です。<input> や <textarea> の placeholder 属性を指定するだけで実装でき、「例:yamada@example.com」のように入力形式の見本を示す用途でよく使われます。ただし文字は入力を始めた瞬間に消えてしまい、色も薄くコントラストが低いため、何の欄かを示す役割は <label> に任せ、プレースホルダーはあくまで補助的なヒントとして使います。
別名
表記ゆれ:入力例、ヒントテキスト、placeholder
「プレースホルダー」は「一時的に場所を埋めるもの」という意味の英語で、入力欄以外(画像が読み込まれるまでの仮表示など)にも使われる広い言葉です。
AI への伝え方
「メール欄にプレースホルダーで入力例を出して」のように伝えます。ラベルを省略してプレースホルダーだけで欄の意味を示す実装は避けたい旨を明記すると、入力中にヒントが消えて何の欄か分からなくなる問題を防げます。
似たパーツとの違い
「テキスト入力欄」との違いは役割で、プレースホルダーは入力欄を構成する一部品(属性)であり、単独では機能しません。ラベルの代わりに使うと、入力を始めた瞬間にヒントが消えて何の欄か分からなくなるため、必ず <label> と併用します。
「フローティングラベル」はラベル自体が入力欄の中から上に浮かび上がる表現で、入力後も見出しが残り続ける点がプレースホルダーと異なります。