JavaScript | HTML / CSS 連携：フォーム応用 － placeholder

JavaScript JavaScript
スポンサーリンク

placeholder は「入力欄の中に表示する“ヒントテキスト”」

placeholder は、 入力欄の中に薄い文字で表示される「ここには何を書けばいいか」のヒント です。

ラベルが「名前」だけだと、 「フルネーム？ ニックネーム？」と迷うことがありますよね。

そこで placeholder を使って、

  • 「例）山田太郎」
  • 「メールアドレスを入力してください」
  • 「キーワードで検索」

みたいな“中身のイメージ”を、 入力欄の中に直接見せてあげるわけです。

ユーザーが入力を始めると、その文字は消えます。 あくまで「未入力のときだけ出ているヒント」です。

placeholder の基本形と動き方

text入力での基本例

<input
  type="text"
  name="username"
  placeholder="例）山田太郎"
>

この場合、

  • 何も入力していないとき → 「例）山田太郎」が薄く表示される
  • 文字を打ち始めると → placeholder は消え、ユーザーの入力だけが表示される

という動きになります。

email入力での例

<input
  type="email"
  name="email"
  placeholder="例）example@example.com"
>

「メールアドレス」とだけ書くより、 具体的な例を placeholder に出しておく方が、 ユーザーは「ここにはこういう形式を書くんだな」とイメージしやすくなります。

重要ポイント： placeholder は「入力内容そのもの」ではなく、 “入力前にだけ見えるヒント”。 送信されるのはユーザーが実際に入力した文字だけ。

placeholder と label の役割の違いをちゃんと理解する

label は「項目名」、placeholder は「中身のイメージ」

例えば、名前入力欄をこう書いたとします。

<label for="username">お名前</label>
<input
  type="text"
  id="username"
  name="username"
  placeholder="例）山田太郎"
>

ここでの役割分担は、

  • label → 「この欄は“お名前”を書く場所ですよ」という項目名
  • placeholder → 「こういう感じで書いてね」という中身のイメージ

です。

よくある悪いパターンが、 label を書かずに placeholder だけで済ませてしまうこと。

<input
  type="text"
  name="username"
  placeholder="お名前"
>

これだと、

  • 入力を始めると「お名前」という文字が消える
  • 何の項目だったか分からなくなることがある
  • 画面読み上げ（アクセシビリティ）的にも情報が足りない

という問題が出ます。

placeholder は「ラベルの代わり」ではなく、 ラベルを補う“追加のヒント”。 label とセットで使うのが基本だと思ってください。

具体例で「良い placeholder」と「微妙な placeholder」を比べる

良い placeholder の例

<label for="email">メールアドレス</label>
<input
  type="email"
  id="email"
  name="email"
  placeholder="例）example@example.com"
>

ここでは、

  • 「メールアドレス」という項目名が明確
  • 「例）example@example.com」で形式のイメージが伝わる

という、いいコンビになっています。

微妙な placeholder の例

<input
  type="email"
  name="email"
  placeholder="メールアドレス"
>

これだと、

  • 入力を始めると「メールアドレス」が消える
  • 何の欄だったか分からなくなる可能性がある
  • 「どういう形式で書けばいいか」が伝わらない

という弱さがあります。

placeholder には「例」や「説明」を書く。 項目名そのものは label に任せる。 この分け方を意識すると、フォームが一気に親切になります。

textarea と placeholder：長文入力でもヒントを出せる

お問い合わせフォームの例

<label for="message">お問い合わせ内容</label>
<textarea
  id="message"
  name="message"
  placeholder="例）ログインできなくなったので、復旧方法を教えてください。"
></textarea>

textarea は「自由に長文を書く欄」なので、 ユーザーが「何を書けばいいか分からない」と固まりがちです。

そこで placeholder で、

  • どのくらいの長さ
  • どのくらい具体的に

を書いてほしいかをイメージさせてあげると、 書き始めやすくなります。

JavaScript と placeholder：動的にヒントを変える

状況に応じて placeholder を書き換える

HTML：

<select id="searchType">
  <option value="user">ユーザー名で検索</option>
  <option value="email">メールアドレスで検索</option>
</select>

<input
  type="text"
  id="keyword"
  name="keyword"
  placeholder="ユーザー名を入力"
>

JavaScript：

const select = document.querySelector("#searchType");
const input = document.querySelector("#keyword");

select.addEventListener("change", () => {
  if (select.value === "user") {
    input.placeholder = "ユーザー名を入力";
  } else if (select.value === "email") {
    input.placeholder = "メールアドレスを入力";
  }
});
JavaScript

ここでの流れは、

  • 検索方法の選択肢が変わる
  • それに応じて「ここには何を書くか」のヒントも変える

というものです。

placeholder は単なる静的な文字列ではなく、 JavaScriptから自由に書き換えられる“動的なヒント”。 状況に応じてユーザーに最適なガイドを出せる。

CSS と placeholder：見た目を少しだけカスタマイズする

色を薄くする・フォントを変える

ブラウザはデフォルトで placeholder を薄いグレーで表示しますが、 CSSで少し調整することもできます。

<input
  type="text"
  name="username"
  placeholder="例）山田太郎"
>

::placeholder {
  color: #999;
  font-style: italic;
}

これで、

  • placeholder の文字色を少し薄く
  • イタリックにして「ヒント感」を出す

ことができます。

ただし、 ブラウザごとにプレフィックス付きの書き方が必要な場合もあります。

input::placeholder {
  color: #999;
}

input::-webkit-input-placeholder {
  color: #999;
}

input:-ms-input-placeholder {
  color: #999;
}

CSSで placeholder をいじるときは、 「ヒントだと分かるように薄めにする」くらいに留めると、 読みやすさと分かりやすさのバランスが取りやすいです。

placeholder に「絶対書いてはいけないもの」

バリデーションメッセージを placeholder に書かない

例えば、こういうのは良くないです。

<input
  type="email"
  name="email"
  placeholder="正しいメールアドレスを入力してください"
>

理由は、

  • 入力前は「注意書き」に見える
  • 入力を始めるとその注意書きが消える
  • エラー時に何が悪かったか分かりづらい

からです。

バリデーションメッセージは、 エラーが起きたときに別の場所（入力欄の下など）に表示するのが基本。

placeholder は「入力前のヒント」であり、 「エラーの説明」ではありません。

placeholder を使うか迷ったときの判断基準

「ここは“何を書けばいいか”が直感的に分かりづらい欄か？」

自分にこう聞いてみてください。

この入力欄は、

  • ラベルだけで十分意味が伝わるか？
  • それとも「例」や「説明」がないと、ユーザーが迷いそうか？

迷いそう → placeholder を書く 十分伝わる → placeholder はなくてもいい

例えば、

  • 「名前」 → 例があると親切（フルネームかどうかなど）
  • 「検索」 → 「キーワードを入力」と書くと分かりやすい
  • 「タグ」 → 「カンマ区切りで入力」などの説明があると助かる

こういう欄には、 placeholder がかなり効いてきます。

初心者として「placeholder」で絶対に掴んでほしいこと

placeholder は、 「入力欄の中に、未入力のときだけ表示される“ここには何を書けばいいか”のヒントテキスト」 です。

  • 実際に送信されるのはユーザーが入力した文字だけ
  • label は「項目名」、placeholder は「中身のイメージ」
  • 例や形式のヒントを書くと、ユーザーが迷いにくくなる
  • JavaScriptから動的に書き換えて、状況に応じたガイドも出せる
  • バリデーションメッセージを placeholder に書くのはNG

あなたが placeholder を書くときに、 「この一言で、ユーザーが“ああ、ここにはこういう感じで書けばいいんだな”ってすぐ分かるか？」 までイメージできていたら、 もう placeholder を“ただの薄い文字”ではなく、 “ユーザーの迷いを減らしてくれる、小さくて強いナビゲーション”として扱えている状態です。

スポンサーリンク
タイトルとURLをコピーしました