入力

入力欄で伝えるべきことは3つあります。何の欄か、どう書くか、どこを間違えたか。消えてよいのは例だけです。

図を大きく見る

図の中身を文字で読む

• ✕ プレースホルダーでラベルを代用　入力前　○ ラベルとヘルプは常時表示
• メールアドレス（必須）
• メールアドレス
• kohara@
• 入力を始めた瞬間
• ご連絡先としてお使いのものをご入力ください。
• kohara@　形式の例だけをプレースホルダーに入れるのは可。
• 何の欄か分からなくなる。見直したいときも手がかりがない。　薄い色なのでコントラスト比も基準を下回りやすい。　090-1234-5678
• ラベルと入力欄は詰める（6px）。
• 入力欄の幅も情報になる。
• 郵便番号の欄が本文と同じ幅だと、長い入力を期待されていると誤解される。
• 項目と項目は空ける（32px）。
• この差がないと、どのラベルがどの欄か読めない。

ひと目で#

ラベル

項目名。省略できない。常に表示する

ヘルプテキスト

形式の制約や目的の説明。入力の前に見えている必要がある

プレースホルダー

入力を始めると消える。形式の例にだけ使う

テキストフィールド

1行。type の選び方で、モバイルのキーボードが変わる

テキストエリア

複数行。初期の高さが、期待する分量を伝える

使い分け#

図を大きく見る

図の中身を文字で読む

• 4つの文字を、どこに置くか
• 電話番号　（必須）　ラベル　項目名。消さない
• 例: 09012345678　プレースホルダー　形式の例だけ
• ハイフンなしでご入力ください　ヘルプ　制約の説明。常に見せる
• 数字だけでご入力ください　エラー　ヘルプの下に足す
• 入力を始めると
• 電話番号　消えるのはプレースホルダーだけ。
• 項目名も制約の説明も、打っている最中こそ要る。
• 09012345　プレースホルダーでラベルを代用すると、この瞬間に手掛かりが消える。

間違えやすいところ#

• ✕プレースホルダーでラベルを代用する入力を始めた瞬間に、何の欄か分からなくなる
• ✕type をすべて text にするモバイルのキーボードが内容に合わない
• ✕autocomplete 属性を付けない自動入力が働かず、手間が増える
• ✕for 属性で結び付けない押せる範囲が広がらず、読み上げでも項目名が伝わらない
• ✕入力欄の幅をすべて同じにする書く内容の長さが伝わらない
• ✕必須を米印だけで示す意味の説明が要る。「（必須）」と書く
• ✕resize: none を指定する長文を見返す手段を奪う
• ✕入力中に書式を強制的に変えるカーソルの位置が飛ぶ

直す例#

架空の案件を1つ例にとります。どこを見て、何をどう直すかを書きます。

通販の会員登録フォームです。電話番号の欄はプレースホルダーに「ハイフンなしで入力」とだけ書いてあり、入力を始めた瞬間に消えます。書き終えた利用者は、ハイフンを入れたかどうかを画面上で確かめられず、いったん全部消して打ち直していました。

直し方は文字の置き場所の整理です。項目名「電話番号」はラベルとして欄の上に、「ハイフンなしでご入力ください」はヘルプテキストとして常時表示へ移し、プレースホルダーには消えてもよい例（09012345678）だけを残します。type="tel" と autocomplete="tel" を添えると、モバイルでは数字キーボードが開き、多くの環境では自動入力が働いて打つ手間そのものが消えます。

確認する#

• 入力を終えた画面を見返して、どの欄に何を入れたか全部言える。ラベルと制約の説明が残っている
• ラベルの文字を押すと欄にフォーカスが移る。for と id が結ばれている
• スマホでメール欄を押すと @ 付き、電話欄では数字のキーボードが開く

使えるパターン#

• フォーム基本レイアウト
• 1行の入力グループ
• フォームの章分け

この話が要る場面#

このページが答えになる、現場の困り事です。困り事の側から探すと、同じ場所に着きます。

この場面のほかの困り事と、そのまま貼れる部品はフォームを作るにまとめてある。逆引きには全188件。

フィールドを組む#

ラベルや必須の設定を切り替えると、下の実物のフィールドがその場で変わります。生成すると、label の結び付け・autocomplete・aria-describedby まで済ませた HTML になって出てきます。

<div class="field">
  <label for="email">メールアドレス<span>（必須）</span></label>
  <input type="email" id="email" name="email" required
         autocomplete="email" aria-describedby="email-help email-error">
  <p id="email-help" class="help">ご連絡先としてお使いのものをご入力ください。</p>
  <p id="email-error" class="error" role="alert"></p>
</div>

<style>
.field { display: grid; gap: var(--space-2); justify-items: start; }
.field input { font: inherit; padding: var(--space-2) var(--space-3);
  border: 1px solid var(--color-border); inline-size: min(100%, 22rem); }
.field .help { margin: 0; font-size: var(--text-sm); color: var(--color-text-muted); }
.field .error { margin: 0; font-size: var(--text-sm); color: var(--color-danger); }
.field input[aria-invalid="true"] { border-color: var(--color-danger); }
</style>

この道具は JavaScript で動きます。無効の場合は、上の使い分けの表に沿って label と aria-describedby を手で結び付けてください。

出典#

• MDN「<input>」
• Nielsen Norman Group「Placeholders in Form Fields Are Harmful」

関連#

• 選択選択肢がある場合
• フォームの検証誤りの伝え方
• 余白ラベルと入力欄の距離
• 構造で伝えるラベルの結び付け