【HTML Living Standard】placeholder属性の使い方
placeholder属性の使い方について、初心者にもわかりやすく解説します。
基本的な使い方
placeholderプロパティは、HTMLの入力フィールドである<input>要素や<textarea>要素に設定することで、そのフィールドが空のときにユーザーに表示される短いヒントテキストを保持するプロパティです。このテキストは、ユーザーがフィールドに何かを入力し始めると自動的に非表示になり、フィールドが再び空になると表示されます。
このプロパティの主な目的は、ユーザーがフォームに何を入力すべきか、またはどのような形式で入力すべきかを示すことで、入力作業をよりスムーズに行えるように支援することです。例えば、「お名前を入力してください」や「例: yourname@example.com」といった具体的な例や指示を表示することで、ユーザーは迷うことなく必要な情報を入力できます。これにより、フォームの使いやすさ（ユーザーエクスペリエンス）が向上します。
しかし、placeholderプロパティはあくまで補助的な情報提供手段であり、入力フィールドの本来の目的や意味を定義するものではありません。アクセシビリティの観点からは、特に注意が必要です。スクリーンリーダーなどの支援技術を利用するユーザーは、フィールドにフォーカスを当てたり入力を開始したりするとplaceholderテキストが消えてしまうため、フィールドの目的を永続的に伝えることができません。そのため、入力フィールドには<label>要素を使用して、常に意味を伝えるための明示的なラベルを関連付けることが強く推奨されます。placeholderは長い説明や重要な指示には不向きであり、簡潔なヒントに限定して利用することが望ましいとされています。
構文(syntax)
1<input placeholder="入力例: ユーザー名">
引数(parameters)
引数なし
引数はありません
戻り値(return)
戻り値なし
戻り値はありません
サンプルコード
HTML placeholder属性で入力ヒントを表示する
1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <title>HTML placeholder 属性のサンプル</title> 7 <style> 8 body { font-family: sans-serif; margin: 20px; } 9 label { display: block; margin-top: 10px; } 10 input[type="text"], 11 input[type="email"], 12 textarea { 13 width: 300px; 14 padding: 8px; 15 margin-top: 5px; 16 border: 1px solid #ccc; 17 border-radius: 4px; 18 } 19 input[type="submit"] { 20 margin-top: 20px; 21 padding: 10px 20px; 22 background-color: #007bff; 23 color: white; 24 border: none; 25 border-radius: 4px; 26 cursor: pointer; 27 } 28 input[type="submit"]:hover { 29 background-color: #0056b3; 30 } 31 </style> 32</head> 33<body> 34 <h1>入力フォームの例</h1> 35 <form action="#" method="post"> 36 <label for="username">ユーザー名:</label> 37 <!-- placeholder属性は、入力フィールドが空の場合に表示されるヒントテキストを指定します。 --> 38 <input type="text" id="username" name="username" placeholder="名前を入力してください" required> 39 40 <label for="email">メールアドレス:</label> 41 <!-- ここでもplaceholder属性を使用して、入力形式の例を示しています。 --> 42 <input type="email" id="email" name="email" placeholder="例: your@example.com" required> 43 44 <label for="message">メッセージ:</label> 45 <!-- textarea要素でもplaceholder属性は利用可能です。 --> 46 <textarea id="message" name="message" rows="5" placeholder="ここにメッセージを入力してください"></textarea> 47 48 <input type="submit" value="送信"> 49 </form> 50</body> 51</html>
HTMLのplaceholder属性は、ユーザーがウェブフォームの入力フィールドに何を入力すべきかを示すための、一時的なヒントテキストを表示する役割を持っています。このヒントは、入力フィールドが空のときにのみ表示され、ユーザーが文字を入力し始めると自動的に消えます。これにより、ユーザーは迷うことなく、適切な情報を入力しやすくなります。
placeholder属性は、<input>要素（例: type="text", type="email"）や<textarea>要素といった、テキスト入力が可能なフィールドに設定できます。例えば、サンプルコードでは、「名前を入力してください」や「例: your@example.com」といった具体的なメッセージが、それぞれの入力欄に薄い文字で表示されています。これは、ユーザーが入力フォームをよりスムーズに操作できるようにするための、基本的なUX（ユーザーエクスペリエンス）向上策の一つです。
このplaceholder属性には、特定の引数や戻り値は定義されていません。属性に直接文字列を設定することで、その内容がヒントテキストとして機能します。システムエンジニアを目指す初心者の方にとって、ユーザーフレンドリーなウェブインターフェースを構築する上で、非常に重要な属性の一つです。
HTMLのplaceholder属性は、入力フィールドが空の時に表示される補助的なヒントテキストです。これは入力例を示すものであり、入力欄の目的を説明する「ラベル」の代わりにはなりません。placeholderテキストは入力が始まるとすぐに消えてしまうため、スクリーンリーダーの利用者や、集中力が必要なユーザーにとっては情報が見えなくなり、アクセシビリティを損なう可能性があります。フィールドの目的は必ず<label>要素で明確に提供してください。placeholderは、ユーザーが入力する際に「どんな形式で入力すれば良いか」など、あくまで補助的な情報として活用するのが適切です。必須入力項目であることはrequired属性で示してください。
HTML placeholder 改行されない
1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <title>HTML placeholder 改行の例</title> 7</head> 8<body> 9 <!-- 10 placeholder属性は、入力フィールドに表示されるヒントテキストです。 11 改行コード(\n)やHTMLタグ（<br>など）を直接的な「改行」として解釈しません。 12 これらの文字は、placeholder属性の値として単なる文字列として表示されます。 13 --> 14 15 <label for="inputField">入力フィールド (input要素):</label><br> 16 <!-- input要素のplaceholderでは、<br>タグは文字列としてそのまま表示されます。 --> 17 <input type="text" id="inputField" placeholder="一行目<br>二行目"> 18 <br><br> 19 20 <label for="textareaField">テキストエリア (textarea要素 - HTMLタグの例):</label><br> 21 <!-- textarea要素のplaceholderでも、<br>タグは文字列としてそのまま表示されます。 --> 22 <textarea id="textareaField" placeholder="一行目<br>二行目" rows="4" cols="30"></textarea> 23 <br><br> 24 25 <label for="textareaWrapped">テキストエリア (textarea要素 - 長文の自動折り返し例):</label><br> 26 <!-- textareaのplaceholderに長い文字列を設定すると、フィールドの幅に合わせて自動的に折り返されます。 --> 27 <!-- これは厳密な「改行」ではありませんが、見た目上は複数行のように見えます。 --> 28 <textarea id="textareaWrapped" placeholder="これは非常に長いプレースホルダーテキストです。フィールドの幅に合わせて自動的に折り返されることで、見た目上複数行のように表示されます。改行コードやHTMLタグは効果がありません。" rows="4" cols="30"></textarea> 29</body> 30</html>
HTMLのplaceholder属性は、ウェブページの入力フォームで、ユーザーが値を入力する前の入力フィールドやテキストエリアに表示されるヒントテキストを設定するために使用します。この属性はユーザーに対して、入力すべき内容の例や形式を伝える役割があります。placeholder属性自体は引数を取らず、特定の値を返す戻り値もありません。
サンプルコードが示すように、placeholder属性の値に改行コード（\n）やHTMLタグ（例えば<br>タグ）を含めても、ブラウザはこれらを直接的な「改行」としては解釈しません。代わりに、これらの文字は単なる文字列として入力フィールド内に表示されます。したがって、<input type="text" placeholder="一行目<br>二行目">のように記述しても、<br>タグがそのまま表示され、テキストが複数行に分かれることはありません。これは、input要素だけでなくtextarea要素でも同様の挙動を示します。
ただし、textarea要素の場合、placeholderに設定した文字列が非常に長いと、フィールドの幅に合わせて自動的にテキストが折り返されることがあります。これは厳密な意味での改行ではありませんが、見た目上は複数行にわたって表示されているように見えます。placeholder属性は、入力欄のガイダンスを簡潔に提供するのに便利な機能です。
placeholder属性は、入力フィールドにユーザーへのヒントテキストを表示するために使用されます。この属性の主な注意点は、値の中にHTMLの<br>タグや改行コード（\n）を記述しても、これらが実際の改行として機能せず、単なる文字列としてそのまま表示されることです。
input要素のplaceholderは、常に一行で表示されます。textarea要素のplaceholderでも、<br>タグや改行コードによる明示的な改行はできません。ただし、textarea要素のplaceholderに非常に長い文字列を設定した場合、フィールドの幅に合わせてテキストが自動的に折り返されることがあります。これは視覚的に複数行のように見えますが、プログラムで制御された改行ではないため、複数行の情報を提示する目的でplaceholderを利用しないようご注意ください。