入力欄にautocompleteを指定する：氏名とメールの用途を照合する

名前とメールアドレスを毎回入力してもらう画面では、入力欄の用途もHTMLに記述できます。入力欄にautocompleteを指定するときは、画面に見える項目名、入力形式、補完してほしい情報を分けて考えましょう。

架空の見学会の連絡先を題材にします。labelとinputを書ける人向けの練習で、エディターとブラウザーを使います。送信や予約受付は作らず、二つの欄の用途を指定し、補完される場合とされない場合を切り分けるところまで扱います。

項目名と入力形式の横に、情報の用途を書く

最初に「氏名」「連絡先メールアドレス」の二項目を紙へ書きます。今回は入力する本人の氏名を一つの欄で受け取り、本人への連絡先を別の欄に入れる設定です。作品名や問い合わせの件名ではありません。

labelは人が読む項目名、typeは入力部品の種類、autocompleteは補完する情報の用途を伝える手がかりです。type="text"だけでは氏名と作品名を区別できません。type="email"を選んでも、誰のどんな連絡先なのかは項目名と仕様を照合する必要があります。

W3Cの入力目的の解説は、利用者本人についての所定の情報を、プログラムで識別できるようにする考え方を示しています。autocompleteを追加しても、入力中に読めるlabelは残します。基本の関連付けはlabelの記事を参照してください。

この練習では、氏名全体にはname、メールアドレスにはemailという値を対応させます。これらは自由に作る名前ではなく、仕様で定められた語です。一方、inputのname属性はフォームのデータ項目名なので、autocompleteのnameという値と混同しないようにします。

二つの欄へ、意味の合う値を指定する

次の全体をcontact-practice.htmlへ保存し、ブラウザーで開きます。送信ボタンと送信先を設けない練習ページです。自分の個人情報を入れる必要はなく、手入力の確認には架空の氏名と例示用アドレスを使えます。

<!doctype html>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>連絡先の入力用途｜練習</title>
  <style>
    body { margin: 1rem; font-family: sans-serif; line-height: 1.8; }
    main { max-width: 36rem; margin-inline: auto; }
    label { display: block; }
    input { box-sizing: border-box; max-width: 100%; font: inherit; }
    input:focus-visible { outline: 3px solid #175ca4; outline-offset: 3px; }
  </style>
</head>
<body>
  <main>
    <h1>見学会の連絡先（架空の練習例）</h1>
    <p>入力用途の練習です。送信機能はありません。</p>
    <p>
      <label for="visitor-name">氏名</label>
      <input id="visitor-name" name="visitorName" type="text"
             autocomplete="name">
    </p>
    <p>
      <label for="visitor-email">連絡先メールアドレス</label>
      <input id="visitor-email" name="visitorEmail" type="email"
             autocomplete="email">
    </p>
  </main>
</body>
</html>

氏名の欄ではidがvisitor-name、データ項目名がvisitorName、補完の用途がnameです。三つを同じ文字にそろえる必要はありません。大切なのはlabelのforとidが対応し、autocompleteの値がその欄で求める情報と一致することです。

MDNのautocompleteの説明で、用途を表す値と、候補の提供がブラウザーに依存することを確認できます。上のコードは用途の指定例であり、候補表示を必ず発生させるデモではありません。ブラウザーがフォームへの所属や送信ボタンを条件にする場合もあるので、実際の受付フォームではその構成で再確認します。

候補が出ないとき、属性と利用環境を分けて調べる

一つ目の失敗は、autocomplete="氏名"やautocomplete="visitorName"と書くことです。項目の意味を日本語で書いても、仕様の値にはなりません。修正では氏名全体を求める欄にnameを指定し、保存後のHTMLで綴りを再確認します。

候補が出ないという症状だけから、この誤記が原因だとは決められません。属性が正しい場合は、ブラウザーの補完設定、保存済み情報の有無、練習ページの構成を確認します。保存済みの候補がない環境なら、用途を指定しても補う情報がない場合があります。

確認メモを「属性：nameとemailを照合済み」「補完候補：この環境では表示なし」の二行に分けます。候補が出なかったことを属性の不合格にせず、逆に候補が出たことだけで正しい用途指定とも判断しません。推測による補完と、書いた属性の検証を分けるためです。

氏名全体と姓だけを、同じ欄として扱わない

二つ目の失敗は、氏名欄を「姓」と「名」へ分けたのに、両方にnameを残すことです。画面の項目名は別々でも、属性はどちらも氏名全体を求めています。候補がどう表示されたかにかかわらず、仕様とコードが食い違っています。

分割が本当に必要なら、姓にはfamily-name、名にはgiven-nameを使う案を確認します。HTML標準の自動補完の定義と照合し、label、id、データ項目名も別々にしてください。今回の完成例は氏名一欄の仕様なので、分割する必要はありません。

修正後は紙に書いた項目の用途から属性を読み直します。「姓→family-name」「名→given-name」と一対ずつ追えれば、氏名全体の指定が残っていないことを確認できます。実際の名前の形式を一律に決めつけず、受付側で必要な形式も確認しましょう。

作品名の欄へnameを付けるのも別の誤りです。見た目が名前の入力でも、人の氏名と作品の題名では用途が違います。該当する用途がない欄へ似た値を無理に当てはめず、独自の候補検索を作る場合は別の操作設計として扱います。

氏名とメール、それぞれの用途を属性と照合する

コードを見る前に二つの欄の用途を書き出します。その後、表示とHTMLを行き来し、次の条件を確認してください。

• 氏名全体の欄はautocomplete="name"で、姓だけの指定になっていない。
• メールの欄はtype="email"、autocomplete="email"で、対応するlabelが入力後も残る。
• 二つのidが異なり、項目名を押すと対応する欄へ移る。
• 候補が出なくても手入力でき、Tabキーで次の欄へ移れる。

完成メモにはブラウザー名と、属性の確認結果、候補の有無を別々に記録します。自動補完された値も利用者が修正できることを確かめます。この指定は本人確認や入力の正しさの保証ではなく、実際の受付には送信時の検証が別に必要です。

画面幅を狭めても項目名と欄が読めるかまで確認したら、今回の練習は完了です。無料のHTMLレッスンに戻る際も、見える名前と機械へ渡す用途の両方を説明できるようにしておきましょう。