HTML講座 / placeholderと入力中も残る案内文を付ける

空の入力欄に短い例を表示するにはplaceholderを使います。欄の名前にはlabel、実際の初期値にはvalueなどを使い、入力中も必要な条件は欄の外へ残します。ヒントと実際の値を分けると、例文を利用者の回答として送る誤りを防げます。

label・placeholder・valueの違い

新規の問い合わせ欄でメールの例を見せるならplaceholderを使います。例のアドレスをvalueへ入れると本物の値に見え、必須の空欄検査も通る場合があります。一方、保存済み情報の編集では実際の初期値が必要です。目的を分けて指定します。

inputに短いヒントを付ける

開始タグへplaceholderを追加します。forとidでラベルを関連付け、nameで送信キーを決めます。

<label for="email">Email</label>
<input type="email" id="email" name="email"
       placeholder="e.g. alex@example.com">

placeholderを使えるinputの型はtext、search、tel、url、email、passwordです。dateやnumberで同じ動作を期待せず、条件を欄の外に書きます。詳しくはHTML標準のplaceholderと入力型と属性の対応を参照できます。関連付けはlabelとinputでも扱います。

textareaのヒントと初期値

複数行のtextareaにもplaceholderを使えます。ヒントだけにする場合は開始タグと終了タグの間を空にします。

<label for="message">Message</label>
<textarea id="message" name="message" rows="4"
          placeholder="e.g. When will my order arrive?"></textarea>

次はヒントではなく編集できる初期値です。textareaではvalue属性ではなくタグの間の文章が初期内容になります。

<textarea name="message">Please tell me when my order will arrive.</textarea>

空白やインデントも値になる場合があるため、空欄のつもりでヒントが出なければタグの間を確認します。textareaの標準規則と複数行入力と選択メニューで使い方を確認できます。

重要な条件は入力中も残す

placeholderは入力すると消えるので、項目名や重要な条件の代わりにはなりません。見えるラベルと補足の文章を残し、補足のIDをaria-describedbyへ指定すると、支援技術も説明を利用できます。

<label for="email">Email (required)</label>
<input type="email" id="email" name="email"
       placeholder="e.g. alex@example.com"
       aria-describedby="email-help" required>
<p id="email-help">Enter the email address where you want to receive a reply.</p>

これは説明との関連付けで、検証処理そのものを追加する属性ではありません。欄を操作中も条件を読めるかを確認します。W3C WAIのフォーム説明にこの方法の解説があります。

必須メールと任意メッセージの完全な例

次をUTF-8のform-guide.htmlとして保存し、ブラウザーで開きます。CSSは白い背景でのヒント色を指定し、狭い画面では欄をフォームの幅に収めています。

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Form guidance example</title>
  <style>
    body {
      margin: 24px;
      color: #222;
      font-family: sans-serif;
      line-height: 1.6;
    }
    form { max-width: 440px; }
    label { display: block; font-weight: bold; }
    input, textarea {
      box-sizing: border-box;
      width: 100%;
      padding: 10px;
      border: 1px solid #777;
      border-radius: 4px;
      font: inherit;
    }
    input::placeholder, textarea::placeholder {
      color: #666;
      opacity: 1;
    }
    .help { margin-top: 4px; }
    button { padding: 8px 20px; font: inherit; }
  </style>
</head>
<body>
  <h1>Contact us</h1>
  <form method="get">
    <p>
      <label for="email">Email (required)</label>
      <input type="email" id="email" name="email"
             placeholder="e.g. alex@example.com"
             aria-describedby="email-help" required>
    </p>
    <p id="email-help" class="help">Enter the email address where you want to receive a reply.</p>
    <p>
      <label for="message">Message (optional)</label>
      <textarea id="message" name="message" rows="4"
                placeholder="e.g. When will my order arrive?"></textarea>
    </p>
    <button type="submit">Submit</button>
  </form>
</body>
</html>

最初はヒントが見え、入力すると消えますが、ラベルと欄の外の説明は残ります。入力をすべて消すとヒントが戻ります。空のメールで送信、abcで送信、alex@example.comでメッセージを空のまま送信、の順に比較します。必須と基本形式は別の条件で、書式が通ってもアドレスの実在は保証されません。

この例にメッセージを保存するサーバーはありません。GETで現在の文書へ送る実習です。HTTP上ではURLに値が出ることを確認でき、ローカルファイルでは扱いが異なる場合があります。入力検証の境界値も合わせて試してください。

placeholderと実際の値の送信を比べる

ヒント自体は送信されませんが、空の値が項目として送られる場合はあります。nameがあり無効化されていない欄なら、検証に止められなければemail=のようになります。nameがない欄やdisabledの欄は通常のデータ一覧から除かれます。

次を別のHTML文書のbodyへ入れ、開発者ツールのConsoleでその後のコマンドを実行します。通信せずに一覧を作る実習です。

<form id="compare-form">
  <label for="default-name">Initial value</label>
  <input id="default-name" type="text" name="default_name" value="Alex">
  <label for="hint-name">Hint example</label>
  <input id="hint-name" type="text" name="hint_name" placeholder="e.g. Alex">
</form>

Array.from(new FormData(document.getElementById("compare-form")).entries())

[["default_name", "Alex"], ["hint_name", ""]]

初期状態ではvalueのAlexは含まれ、ヒントの「e.g. Alex」は含まれません。二つ目にSamと入力して再実行すると現在値がSamになります。FormDataの構築自体はrequiredの検証をしません。フォームデータの構築規則と実際の送信との違いを確認できます。

ヒントが出ない、読みにくい場合

まずinputのvalue、textareaの内容、自動入力、スクリプトで値が入っていないか確認します。次に型がplaceholderへ対応しているかを調べます。短い例だけを欄内に置き、長い条件や改行を必要とする説明は外へ出します。

CSSの::placeholderで色や不透明度を調整できますが、薄過ぎる色にせず背景との読みやすさを確認します。モバイルでもラベル、ヒント、説明を区別できるかを点検してください。実際の初期値を誤って削除するのではなく、欄の目的に合った指定へ直すことが大切です。