【HTML】placeholder 属性の使い方｜入力欄にヒントを表示する方法と ::placeholder での装飾

入力欄に薄いグレーの文字で「例：山田 太郎」と書かれているのを見たことがあると思います。あれを表示しているのが placeholder 属性です。1行足すだけで入力例を示せる便利な属性ですが、使える入力欄が決まっていたり、ラベルの代わりに使うと使いづらいフォームになってしまったりと、知っておきたい注意点もあります。この記事では基本の書き方から、対応している type、CSS の ::placeholder での装飾、そして表示されないときの原因までを解説します。

placeholder は入力欄に表示される「入力例のヒント」

placeholder 属性は、入力欄が空のときだけ表示される短いヒントを指定する属性です。利用者が文字を入力し始めると自動的に消え、入力内容をすべて消すとまた表示されます。書き方は input 要素や textarea 要素に属性を1つ足すだけです。

<label for="zip">郵便番号</label>
<input type="text" id="zip" name="zip" placeholder="1000001（ハイフンなし）">

<label for="message">お問い合わせ内容</label>
<textarea id="message" name="message" placeholder="できるだけ詳しくご記入ください"></textarea>

ここで大事なのは、placeholder はあくまで見た目のヒントであって、入力された値ではないということです。何も入力せずに送信すれば、サーバーに届く値は空のままです。あらかじめ値を入れておきたい場合は placeholder ではなく value 属性を使います。

<!-- 薄い文字でヒントが出るだけ。送信される値は空 -->
<input type="text" name="pref" placeholder="東京都">

<!-- 最初から入力済みの状態。送信される値は「東京都」 -->
<input type="text" name="pref" value="東京都">

また、ヒントは1行のテキストだけです。属性値の中で改行しても、その改行は半角スペースとして扱われるため、複数行のヒントを表示することはできません。

placeholder が使える入力欄・使えない入力欄

placeholder はすべての入力欄で使えるわけではありません。文字を自由に入力する形式の入力欄にだけ対応していて、カレンダーやカラーピッカーのように専用の UI が出るものでは指定しても無視されます。

select 要素には placeholder 属性がありません。プルダウンで「選択してください」と最初に表示させたいときは、値が空の option を先頭に置く方法が定番です。disabled と selected を付けておくと、選び直して空に戻すことができなくなります。

<select name="plan" required>
  <!-- プルダウンの「プレースホルダー」代わり -->
  <option value="" disabled selected>プランを選択してください</option>
  <option value="free">無料プラン</option>
  <option value="pro">有料プラン</option>
</select>

value="" にしておけば、required を付けたときに「選択されていない」と判定されるため、未選択のまま送信されるのを防げます。

ラベルの代わりに placeholder を使わない

フォームを縦にすっきり見せたいという理由で、label を置かずに placeholder="お名前" のように項目名だけを入れているフォームをよく見かけます。しかしこれは使いづらさにつながるため、避けたほうがよい書き方です。理由はいくつかあります。

まず、入力を始めた瞬間にヒントが消えてしまうという点です。何個も入力欄が並ぶフォームで、入力し終わってから見直したときに「この欄は何を書く場所だったか」が分からなくなります。特に確認画面のない長いフォームでは、書き間違いに気づけません。

次に、色が薄く読みづらいという点です。プレースホルダーの文字色はブラウザーの既定でグレーになっており、背景とのコントラストが低くなります。視力の弱い方や、明るい屋外でスマートフォンを使っている場面では読み取れないことがあります。

さらに、label と for 属性で結びついていればラベルの文字をタップしても入力欄にフォーカスが移るのに対し、プレースホルダーにはその働きがありません。スクリーンリーダーでの読み上げも、ラベルがある場合とは扱いが異なります。

結論としては、項目名は label で示し、placeholder は入力例や書式の補足に使うのが正しい役割分担です。

<!-- 避けたい書き方：項目名をプレースホルダーだけで示している -->
<input type="tel" name="tel" placeholder="電話番号">

<!-- おすすめ：項目名は label、書式の例を placeholder に -->
<label for="tel">電話番号</label>
<input type="tel" id="tel" name="tel" placeholder="09012345678（ハイフンなし）">

::placeholder でヒントの文字を装飾する

プレースホルダーの見た目は CSS の ::placeholder 擬似要素で変更できます。文字色や斜体、字間などを指定して、入力済みの文字とはっきり区別が付くようにしておくと親切です。次のデモで、色と字体が変わっているのを確認してみてください。

<form class="contact">
  <label for="name">お名前</label>
  <input type="text" id="name" name="name" placeholder="例：山田 太郎">

  <label for="mail">メールアドレス</label>
  <input type="email" id="mail" name="mail" placeholder="example@webool.net">

  <label for="message">お問い合わせ内容</label>
  <textarea id="message" name="message" rows="3" placeholder="できるだけ詳しくご記入ください"></textarea>
</form>

.contact {
  display: grid;
  max-width: 360px;
  font-family: sans-serif;
}

.contact label {
  margin-bottom: 4px;
  font-size: 14px;
  font-weight: bold;
}

.contact input,
.contact textarea {
  margin-bottom: 16px;
  padding: 8px;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-size: 16px;
}

/* プレースホルダーの文字だけを装飾する */
.contact input::placeholder,
.contact textarea::placeholder {
  color: #9aa0a6;
  font-style: italic;
}

::placeholder で指定できるのは、color や font-style、font-size、letter-spacing、opacity のような文字に関するプロパティに限られます。margin や display のようなレイアウトのプロパティは効きません。

色を変えるときは、薄くしすぎないよう注意してください。読みやすさの目安としては、背景色とのコントラスト比が 4.5:1 以上あることが望ましいとされています。デザイン優先で #ddd のような極端に薄い色にすると、ヒントとして機能しなくなります。

入力中かどうかで枠線を変える :placeholder-shown

:placeholder-shown は、プレースホルダーが表示されている（＝まだ何も入力されていない）入力欄にマッチする擬似クラスです。「未入力の欄だけ背景色を変える」といった表現に使えます。::placeholder（擬似要素、コロン2つ）とは別物なので、混同しないようにしましょう。

/* 未入力（プレースホルダーが見えている）ときだけ背景を薄い黄色に */
input:placeholder-shown {
  background: #fffde7;
}

/* 何か入力されたら通常の背景に戻る（上のルールが外れるだけ） */
input {
  background: #fff;
}

placeholder が表示されないときに確認すること

value が入っていて隠れている

プレースホルダーは入力欄が空のときにしか表示されません。value 属性に値が入っていたり、ブラウザーの自動入力（オートフィル）で値が埋まっていたりすると、当然ながら見えなくなります。JavaScript で値を設定している場合も同じで、空文字を代入すればまた表示されます。

type が対応していない

先ほどの表のとおり、date や color などでは placeholder は無視されます。日付欄で「YYYY/MM/DD」のような書式を見せたい場合は、入力欄の外に説明文を置くか、フォーカスされたときだけ type を date に切り替えるといった対応が必要です。number は指定できますが、数値以外を入力できない都合上、ブラウザーによっては見え方が異なります。

::placeholder のセレクタが要素に届いていない

色を変えたのに反映されないときは、セレクタが対象の要素に当たっているかを疑ってください。input だけを指定していて textarea に効いていない、というのはよくある見落としです。両方に適用したいときは、次のようにセレクタを並べて書きます。

/* input と textarea の両方に適用する */
input::placeholder,
textarea::placeholder {
  color: #9aa0a6;
}

なお、以前は ::-webkit-input-placeholder や ::-moz-placeholder といったベンダープレフィックス付きの書き方が必要でしたが、現在の主要ブラウザーは標準の ::placeholder に対応しているので、新しく書くコードでは ::placeholder だけで十分です。

まとめ

placeholder 属性は、入力欄が空のときだけ表示される入力例のヒントです。送信される値にはならないので、初期値を入れたいときは value を使います。使えるのは textarea と、text や email など文字を自由に入力する type に限られ、date や color では無視されます。select には属性自体がないため、空の option で代用します。見た目は ::placeholder で整えられますが、薄くしすぎると読めなくなるので注意してください。そして何より、項目名は label で示し、placeholder は補足に徹するのが、使いやすいフォームを作るうえでの基本です。

参考ページ

• <input>: 入力欄（フォーム入力）要素 – HTML | MDN
• ::placeholder – CSS: カスケーディングスタイルシート | MDN
• :placeholder-shown – CSS: カスケーディングスタイルシート | MDN
• <textarea>: テキストエリア要素 – HTML | MDN