【HTML Living Standard】placeholder属性の使い方
placeholder属性の使い方について、初心者にもわかりやすく解説します。
基本的な使い方
placeholderプロパティは、HTMLの入力フィールドである<input>要素や<textarea>要素に設定することで、そのフィールドが空のときにユーザーに表示される短いヒントテキストを保持するプロパティです。このテキストは、ユーザーがフィールドに何かを入力し始めると自動的に非表示になり、フィールドが再び空になると表示されます。
このプロパティの主な目的は、ユーザーがフォームに何を入力すべきか、またはどのような形式で入力すべきかを示すことで、入力作業をよりスムーズに行えるように支援することです。例えば、「お名前を入力してください」や「例: yourname@example.com」といった具体的な例や指示を表示することで、ユーザーは迷うことなく必要な情報を入力できます。これにより、フォームの使いやすさ（ユーザーエクスペリエンス）が向上します。
しかし、placeholderプロパティはあくまで補助的な情報提供手段であり、入力フィールドの本来の目的や意味を定義するものではありません。アクセシビリティの観点からは、特に注意が必要です。スクリーンリーダーなどの支援技術を利用するユーザーは、フィールドにフォーカスを当てたり入力を開始したりするとplaceholderテキストが消えてしまうため、フィールドの目的を永続的に伝えることができません。そのため、入力フィールドには<label>要素を使用して、常に意味を伝えるための明示的なラベルを関連付けることが強く推奨されます。placeholderは長い説明や重要な指示には不向きであり、簡潔なヒントに限定して利用することが望ましいとされています。
構文(syntax)
1<input placeholder="入力例: ユーザー名">
引数(parameters)
引数なし
引数はありません
戻り値(return)
戻り値なし
戻り値はありません