入力例が消えて困る？プレースホルダーと説明文の役割を分けよう

入力欄の中にある薄い文字は、入力を始めると消えることがある。これはプレースホルダーという、空の欄に表示される短いヒントだよ。

このページでは、欄の名前・入力例・条件の説明を、どこへ置くと見失いにくいかを理解する。コードは使わず、フォームの文章を紙やメモで並べる練習をするよ。実在する個人情報の入力は必要ない。

三つの役割を分けてみよう

「例：山田 はなこ」が欄の中にあるだけでは、入力後に条件を見直せない。項目の名前まで消えるなら、どの欄を編集しているかも見失いやすい。

W3Cのフォームの説明でも、プレースホルダーはラベルの代わりにならないことや、常に見える案内の重要性を扱っているよ。

なくなると困る条件は外へ出す

「10文字以内」「ハイフン不要」「領収書に使う名前」など、入力中も必要な条件は、欄の近くに表示する。フォーム全体の冒頭だけに書いてある条件も、長いページでは見失うことがあるね。

例が実際の入力値に見えないかも確認しよう。電話番号の例が、必須入力の済んだ値に見えると、そのまま送信してしまうかもしれない。自動入力された値と入力例の違いも、作る側では区別したいところ。

メモで書き直す練習

1. 架空の「お問い合わせ件名」の欄を一つ選ぶ。
2. ラベルを「件名」と書く。
3. 常に見せる説明を「相談したい内容を短く書いてください」とする。
4. 入力例として「見積もりについて」を添える。
5. 例の文字を隠しても、何をどのように書くか分かるか読む。

期待する結果は、例がなくても欄の役割が分かり、説明を読み直せること。うまくいかなければ、名前と条件を一文に詰めず、二つに分けてみよう。

見た目だけで完成にしない

ラベルや説明を見える場所に置くことと、支援技術で入力欄との関連が伝わることは別の確認だよ。実装するときは入力欄とlabelを結び付ける方法も合わせて確かめよう。

参照した公式資料

• Form Instructions | Web Accessibility Initiative (WAI) | W3C

確認日：2026年10月23日。練習例は架空のデータを使っています。