フォーム入力欄に「ヒント」や「既定値」を最初から表示したいとき、HTML では placeholder 属性と value 属性の 2 種類の方法があります。両者は似ていますが役割が異なり、使い分けを理解しておくことが大切です。この記事ではそれぞれの特徴と実装例、注意点を解説します。
placeholder 属性：入力のヒントを表示する
placeholder は入力前に薄い文字色で「何を入力するのか」を示すためのヒントを表示します。入力を開始すると消えるのが特徴です。送信時には placeholder の内容はフォーム値として扱われません。
<form>
<label>ユーザー名：
<input type="text" name="username" placeholder="例）taro_yamada">
</label>
</form>
使いすぎるとアクセシビリティ上の問題（視認性・ヒント消失）になるため、必ず <label> と併用し、placeholder を入力補助程度にとどめるのが推奨です。
value 属性：初期値を設定する
value は入力欄に「既定値」を設定します。送信時にも実際の値として送られるため、ユーザーが編集しない限り value がそのままサーバーに渡されます。既に保存された情報を編集フォームに表示するときなどに使います。
<form>
<label>メールアドレス：
<input type="email" name="email" value="user@example.com">
</label>
</form>
ユーザーに必ず変更してもらいたい場合には不適切です。あくまで「初期入力値」「既存データの再表示」として利用します。
placeholder と value の違い
| 項目 | placeholder | value |
|---|---|---|
| 表示内容 | 入力前のヒント（入力開始で消える） | 入力欄に入った初期値（編集しない限り残る） |
| 送信時の扱い | 送信されない | 送信される |
| 用途 | 例示・入力ガイド | 初期値・既存データの表示 |
組み合わせて使う例
既存の値を表示しつつ、別の入力例を提示したい場合は両方を組み合わせます。この場合、実際に送信されるのは value です。
<form>
<label>電話番号：
<input type="tel" name="phone" value="090-1234-5678" placeholder="ハイフンありで入力">
</label>
</form>
まとめ
フォームに最初からテキストを表示する方法には「placeholder」と「value」があります。前者はあくまで入力補助で送信されず、後者は既定値として送信されます。ヒントを示すなら placeholder、初期値を設定するなら value と、目的に応じて正しく使い分けることで、ユーザーに分かりやすく、かつ安全なフォームを設計できます。
