placeholderとlabelの違いは入力例と項目名の役割にある

labelは、何を入力する欄かを示す項目名です。placeholderは、値が空の入力欄へ表示する短いヒントです。項目名をplaceholderだけで済ませず、入力例や書式の補助に限定して使います。

見た目が似ることはあっても、二つの役割は入れ替えられません。labelは入力中も項目名として残ります。placeholderは入力値ではなく、送信される値にも、入力検査の合格条件にもなりません。

labelで項目名を示しplaceholderで入力例を添える

メールアドレス欄なら、次のように項目名と入力例を分けます。

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

labelの「メールアドレス」は、入力する内容を示します。placeholderのname@example.comは、入力例です。入力欄へ値を入れても、項目名は画面に残ります。

HTML5のフォーム仕様は、placeholderを、入力を助ける短い言葉や短い句としています。内容には、値の例か、期待する書式の短い説明を使えます。同じ仕様は、placeholderをlabelの代わりに使わないよう明記しています。

次の書き方では、「メールアドレス」が項目名なのか、入力例なのかをHTMLで分けられません。

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

入力前には項目名のように見えても、値を入力すれば、その文字は見えなくなります。項目名を確認するために入力内容を消さなければならないフォームにはしません。

表示される文字と入力欄の値を分ける

placeholderは、入力欄の値が空のときに表示されるヒントです。仕様では、値が空で、入力欄へフォーカスがないときに表示するものとしています。利用者が値を入れると、表示される文字は入力値へ替わります。

この違いは、画面表示だけではありません。

HTML5のフォーム送信手順は、フォームのデータへ入力欄の値を加えます。placeholderの文字を入力値として加える処理ではありません。入力欄が空なら、ヒントが見えていても値は空のままです。

初期値を入れるvalue属性とも違います。valueへ入力例を入れると、それが入力欄の値になり、利用者が消さなければ送信されます。記入してほしい値を決めていないなら、入力例をvalueへ入れません。

placeholderはrequiredの検査を通す値にならない

requiredが付いた入力欄では、入力欄の値が空かどうかを検査します。placeholderが表示されていても値は空なので、入力済みとして扱われません。

<label for="postal-code">郵便番号</label>
<input type="text" id="postal-code" name="postal_code"
       placeholder="123-4567" required>

この例で123-4567は入力例です。利用者が何も入力しなければ、requiredの条件を満たしません。反対に、placeholder="必須"と書いても、その属性だけで入力必須にはなりません。

placeholderは入力方法のヒント、requiredは空の値を検査する指定です。サーバー側で受信値を検査する必要も変わりません。入力必須の実装は、別記事の「HTML5のrequired属性は入力必須を示すがサーバー側でも検査する」で扱います。

入力後も必要な説明は入力欄の外へ残す

電話番号の入力例や日付の書式のように、一目で分かる短い情報はplaceholderに向いています。複数の条件、入力できない文字、個人情報の用途など、入力中にも確認する説明は、入力欄の近くへ文章として残します。

WCAG 2.0の達成基準3.3.2は、内容が利用者の入力を求める場合に、ラベルまたは説明を提供するよう求めています。placeholderへ説明を詰め込んで、入力後に見えなくする必要はありません。

入力欄の目的は、labelを入力欄と関連付けて示します。WCAG 2.0の実装方法H44は、表示されるlabelを用意し、そのfor属性と入力欄のid属性を一致させる検査方法を示しています。placeholderの有無とは別に確認します。

空欄、入力後、送信後の三つを確認する

実装後は、入力欄が空の状態だけを見て終わらせません。項目名がlabelとして残ること、値を入力するとヒントが入力値へ替わること、空欄の送信でヒントの文字が受信値にならないことを確認します。

入力検査も別に見ます。requiredが付いていれば、ヒントが表示された空欄で送信を試します。サーバー側では、空の値と実際に入力した値を分けて受け取れるかを確認してください。

まず、問い合わせフォームから、入力欄の中に項目名を書いている箇所を一つ探します。その文字をlabelへ移し、placeholderには必要な入力例だけを残してください。