プレースホルダー
入力フィールドに表示される仮のテキストで、ユーザーに入力内容の形式や例を示す。入力を開始すると消える。
プレースホルダー (placeholder) は、テキスト入力欄が空の状態で表示される薄い灰色のテキストです。HTML では <input placeholder="例: tanaka@example.com"> のように記述します。ユーザーがフィールドをクリックして入力を始めると自動的に消え、入力内容が空に戻ると再び表示されます。
プレースホルダーの主な役割は、入力の形式や期待される内容をユーザーに伝えることです。「電話番号」というラベルだけでは、ハイフンを入れるべきか、市外局番から書くべきか判断できません。プレースホルダーに「090-1234-5678」と表示すれば、期待される形式が一目で伝わります。
ただし、プレースホルダーをラベルの代わりに使うのはアクセシビリティ上の問題があります。スクリーンリーダーはプレースホルダーをラベルとして扱わないため、支援技術の利用者にはフィールドの用途が伝わらないことがあります。入力を開始すると表示が消えるため、送信前に「このフィールドに何を入力すべきだったか」を確認できなくなる問題もあります。特に複数のフィールドを行き来する場面で影響が大きくなります。W3C の WAI が公開しているフォームのチュートリアルは、プレースホルダーはラベルの代替にはならないと明記し、達成基準 3.3.2 ラベルまたは説明 (レベル A) を関連する要件として挙げています。プレースホルダーは補助的な情報にとどめ、ラベル (<label>) は必ず別途設けます。
色のコントラストも見落としやすい点です。ブラウザ既定のプレースホルダー色は薄く、達成基準 1.4.3 コントラスト (最低限) (レベル AA) が通常サイズの文字に求める 4.5:1 を満たさないことがあります。同チュートリアルは白背景に対する例として #767676 を挙げており、この組み合わせのコントラスト比は約 4.5:1 です。
プレースホルダーの文字数にも実務上の制約があります。入力フィールドの幅を超えた部分は表示されないため、欄が狭いモバイル端末では長いプレースホルダーが途中で切れます。判断の基準は文字数の目安ではなく、想定する最小幅の端末で全文が見えるかどうかです。日本語の全角文字は半角文字のおよそ 2 倍の幅を占めるため、同じ文字数でも英数字より早く切れます。切れると意味が変わってしまう説明は、プレースホルダーではなくラベルや補助テキストへ移します。
プログラミングの文脈では、プレースホルダーはテンプレートエンジンや SQL のパラメータバインディングでも使われます。SQL の SELECT * FROM users WHERE name = ? の「?」はプレースホルダーであり、実行時に実際の値に置き換えられます。値をコードと連結せずデータベース側へ別途渡すため、SQL インジェクション攻撃への基本的な対策になります。ただし差し替えられるのは値だけで、テーブル名や列名といった識別子はプレースホルダーにできません。並び替えのキーを外部からの入力で決めるような場面では、受け付ける識別子をあらかじめ定めた一覧と照合する必要があります。
文字数カウントの観点では、プレースホルダーのテキストは入力値ではないため、フォームの文字数カウンターには含めません。しかし、プレースホルダー自体の文字数設計は UX に直結します。「お名前を入力してください」(12 文字) より「山田太郎」(4 文字) のように具体例を示す方が、短くて伝わりやすいプレースホルダーになります。