HTML 属性: placeholder

placeholder 属性は、フォームコントロールに値が無いときにコントロールに表示するテキストを定義します。プレースホルダーテキストは、ユーザーにコントロールに入力するべきデータの種類に関する短いヒントを提供するべきです。

効果的なプレースホルダーテキストは、説明や質問ではなく、期待するデータの種類のヒントとなる単語や短いフレーズです。プレースホルダーを <label> のかわりに用いてはいけません。プレースホルダーはフォームコントロールの値が空でないときは見えないので、<label> のかわりに placeholder に質問を書くと使いやすさとアクセシビリティを損ねます。

placeholder 属性は、入力の種類 textsearchurltelemailpassword で用いることができます。<textarea> 要素でも用いることができます。以下のでは、入力フィールドで期待する形式を示すために placeholder 属性を用いています。

メモ: placeholder 属性にはラインフィード (LF) やキャリッジリターン (CR) を含めることはできません。これらが含まれる場合は、プレースホルダーテキストはクリップされます。

アクセシビリティの懸念

プレースホルダーはフォームに入力するべきデータの種類の例を示すためのみに用いるべきです。決して <label> 要素の代替として用いてはいけません。そのような使用法は、アクセシビリティとユーザー体験を損ねます。

<label> のテキストは、視覚上、そしてプログラム上対応するフォームコントロールと紐づいています。スクリーンリーダーはデフォルトではプレースホルダーの内容を読み上げませんが、ラベルの内容は読み上げます。補助技術を用いるユーザーに、コントロールにどのようなデータを入力するべきかを伝えるのは、ラベルです。ラベルは、ポインティングデバイスを用いているユーザーのユーザー体験も向上させます。ユーザーが <label> をクリック・タッチ・タップすると、そのラベルに紐づいたフォームコントロールにフォーカスが移動します。

補助技術に頼っていない人にとっても、プレースホルダーはラベルの代替として信頼することはできません。プレースホルダーテキストは、通常のフォームコントロールテキストより低いカラーコントラストで表示されます。これは、ユーザーにプレースホルダーテキストとフォームフィールドに入力したデータを混同させないための仕様です。しかし、このようにコントラストが低いことは、弱視のユーザーにとって問題になります。さらに、プレースホルダーテキストは、ユーザーがテキストの入力を始めるとフォームフィールドから消えます。消えるプレースホルダーテキストに指示の情報や例が含まれていると、認知に問題があるユーザーを混乱させる可能性があります。プレースホルダーにラベルが含まれる場合は、フォームが使用できなくなる可能性があります。

HTML

html
<form action="/ja/docs/Web/HTML/Attributes/placeholder">
  <label for="name">名前を入力:</label>
  <input type="text" id="name" name="name" placeholder="e.g. Mike Shinoda" />
  <button type="submit">送信</button>
</form>

結果

仕様書

Specification
HTML
# attr-input-placeholder
HTML
# attr-textarea-placeholder

ブラウザーの互換性

html.elements.input.placeholder

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
placeholder

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support

html.elements.textarea.placeholder

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
placeholder
Line breaks in placeholder

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support

関連情報