Codelab: 住所フォームに関するおすすめの方法

Sam Dutton

さまざまな名前や住所の形式に対応できるフォームを設計するにはどうすればよいですか？フォームの軽微な不具合はユーザーの不満を招き、サイトから離れたり、購入や登録を中止したりする原因になる可能性があります。

この Codelab では、ほとんどのユーザーにとって使いやすく、アクセスしやすいフォームを作成する方法について説明します。

ステップ 1: HTML 要素と属性を最大限に活用する

この Codelab のこのパートでは、空のフォーム（ヘッダーとボタンのみ）から始めます。次に、入力の追加を開始します。（CSS と JavaScript の一部はすでに含まれています）。

  • [Remix to Edit] をクリックして、プロジェクトを編集可能にします。

  • 次のコードを使用して、<form> 要素に名前フィールドを追加します。

<section>
  <label for="name">Name</label>
  <input id="name" name="name">
</section>

名前フィールドが 1 つだけなのに複雑で反復的に見えますが、すでに多くのことを行っています。

label の for 属性を input の name または id と照合して、label を input に関連付けました。ラベルをタップまたはクリックすると、入力にフォーカスが移動します。これにより、入力自体よりもはるかに大きなターゲットになります。これは、指、親指、マウスのクリックに適しています。スクリーン リーダーは、ラベルまたはラベルの入力にフォーカスが当たると、ラベルのテキストを読み上げます。

name="name" についてはどうでしょうか。これは、フォームの送信時にサーバーに送信される、この入力からのデータに関連付けられた名前（実際には「name」）です。name 属性を含めると、この要素のデータに FormData API からアクセスできるようになります。

ステップ 2: ユーザーがデータを入力しやすいように属性を追加する

Chrome で [名前] 入力欄をタップまたはクリックすると、どうなりますか？ブラウザに保存されている自動入力の候補が表示され、name と id の値に基づいて、この入力に適切な候補が推測されます。

入力コードに autocomplete="name" を追加して、次のようにします。

<section>
  <label for="name">Name</label>
  <input id="name" name="name" autocomplete="name">
</section>

Chrome でページを再読み込みし、[名前] 入力欄をタップまたはクリックします。違いは何ですか？

若干の変更があることに注目してください。autocomplete="name" により、提案は以前も autocomplete="name" があったフォーム入力で使用されていた特定の値になりました。ブラウザは適切なものを推測するだけでなく、ユーザーが制御できます。また、ブラウザに保存されている名前と住所を表示、編集するための [管理…] オプションも表示されます。

Android スマートフォンの Chrome の 2 つのスクリーンショット。1 つの入力フィールドがあるフォームが表示されています。自動入力値が設定されている場合と設定されていない場合の 2 つです。1 つはブラウザ UI にヒューリスティックな提案値を表示し、もう 1 つは予測入力値が格納されている場合に UI を表示します。 推定値による自動入力の UI（予測入力とは異なります）。

次に、制約検証属性 maxlength、pattern、required を追加して、入力コードを次のようにします。

<section>
  <label for="name">Name</label>
  <input id="name" name="name" autocomplete="name"
    maxlength="100" pattern="[\p{L} \-\.]+" required>
</section>

  • maxlength="100" は、100 文字を超える入力をブラウザで禁止することを意味します。

  • pattern="[\p{L} \-\.]+" では、Unicode 文字、ハイフン、ピリオド（句点）が許可される正規表現が使用されます。つまり、Françoise や Jörg などの名前は「無効」と分類されません。ただし、値 \w を使用する場合（ラテン アルファベットの文字のみを許可する）は、これに当てはまりません。

  • required は必須であることを示します。ブラウザでは、このフィールドにデータが入力されていないフォームを送信することはできません。送信しようとすると、警告が表示され、入力内容がハイライト表示されます。追加のコードは必要ありません。

これらの属性の有無でフォームの動作を確認するには、次のようにデータを入力します。

  • pattern 属性に適合しない値を入力してみてください。
  • 空の入力でフォームを送信してみてください。必須フィールドが空であることを警告するブラウザの組み込み機能が表示され、そのフィールドにフォーカスが設定されます。

ステップ 3: 柔軟な住所フィールドをフォームに追加する

住所フィールドを追加するには、フォームに次のコードを追加します。

<section>
  <label for="address">Address</label>
  <textarea id="address" name="address" autocomplete="address"
    maxlength="300" required></textarea>
</section>

textarea は、ユーザーが住所を入力する最も柔軟な方法であり、カットと貼り付けに適しています。

本当に必要な場合を除き、住所フォームを番地や町名などのコンポーネントに分割しないでください。ユーザーが住所を意味のないフィールドに当てはめようとしないようにします。

次に、[郵便番号] フィールドと [国または地域] フィールドを追加します。わかりやすくするため、ここでは最初の 5 か国のみを記載しています。詳細なリストは、入力が完了した住所フォームに記載されています。

<section>
  <label for="postal-code">ZIP or postal code (optional)</label>
  <input id="postal-code" name="postal-code"
    autocomplete="postal-code" maxlength="20">
</section>

<section id="country-region">
  <label for="">Country or region</label>
  <select id="country" name="country" autocomplete="country"
    required>
      <option selected value="SPACER"> </option>
      <option value="AF">Afghanistan</option>
      <option value="AX">Åland Islands</option>
      <option value="AL">Albania</option>
      <option value="DZ">Algeria</option>
      <option value="AS">American Samoa</option>
  </select>
</section>

[郵便番号] は省略可能です。これは、多くの国で郵便番号が使用されていないためです。（Global Sourcebook では、194 か国の住所形式に関する情報（サンプル住所を含む）を提供しています）。「国」ではなく「国または地域」というラベルを使用します。これは、リストの一部のオプション（英国など）は（autocomplete の値にかかわらず）単一の国ではないためです。

ステップ 4: 配送先住所と請求先住所を簡単に入力できるようにする

機能性の高い住所フォームを作成しました。たとえば、サイトで配送や請求のために複数の住所が必要な場合はどうすればよいでしょうか。顧客が配送先住所と請求先住所を入力できるように、フォームを更新してください。特に 2 つの住所が同じ場合、データ入力をできるだけ迅速かつ簡単に行うにはどうすればよいですか？この Codelab に付属する記事では、複数のアドレスを処理する手法について説明しています。いずれの場合も、正しい autocomplete 値を使用してください。

ステップ 5: 電話番号フィールドを追加する

電話番号の入力を追加するには、次のコードをフォームに追加します。

<section>
  <label for="tel">Telephone</label>
  <input id="tel" name="tel" autocomplete="tel" type="tel"
    maxlength="30" pattern="[\d \-\+]+" enterkeyhint="done"
    required>
</section>

電話番号の場合は、1 つの入力を使用します。番号を分割しないでください。これにより、ユーザーがデータを入力したり、コピーして貼り付けたりしやすくなり、検証が簡単になり、ブラウザで自動入力できるようになります。

電話番号の入力のユーザー エクスペリエンスを向上させるには、次の 2 つの属性を使用します。

  • type="tel" は、モバイル ユーザーに適切なキーボードが表示されるようにします。
  • enterkeyhint="done" は、これが最後のフィールドで、フォームを送信できることを示すように、モバイル キーボードの Enter キーのラベルを設定します（デフォルトは next）。
Android のフォームの 2 つのスクリーンショット。enterkeyhint 入力属性によってエンターキーボタンのアイコンがどのように変わるかを示しています。
enterkeyhint 属性を使用して、Enter ボタンのラベル（「次へ」と「完了」）を設定します。

住所フォームは次のようになります。

  • さまざまなデバイスでフォームを試します。ターゲットとするデバイスとブラウザフォームで改善すべき点をお聞かせください。

さまざまなデバイスでフォームをテストする方法はいくつかあります。

詳細

  • 分析と実際のユーザーのモニタリング: フォーム設計のパフォーマンスとユーザビリティを実際のユーザーについてテストおよびモニタリングして、変更が成功したかどうかを確認することができます。読み込みパフォーマンスやその他のウェブバイタル指標のほか、ページ分析（住所フォームを完了せずに離脱するユーザーの割合、住所フォームのページにユーザーが費やす時間）やインタラクション分析（ユーザーが操作する、または操作しないページ コンポーネント）をモニタリングする必要があります。

  • ユーザーはどこにいますか住所の形式はどのようになっていますか？住所のコンポーネント（郵便番号など）にどのような名前を使用していますか？Frank's Compulsive Guide to Postal Addresses には、200 を超える国における住所の形式に関する有用なリンクと詳細なガイダンスが記載されています。

  • 国選択ツールは使いづらいことで有名です。アイテムの長いリストに選択要素を使用しないことが最善です。ISO 3166 の国コード標準には、現在 249 か国がリストされています。<select> の代わりに、Baymard Institute の国選択ツールなどの代替手段を検討してください。

    アイテムの多いリスト用に、より優れたセレクタを設計することはできますか？さまざまなデバイスやプラットフォームでデザインにアクセスできるようにするにはどうすればよいですか？（<select> 要素は多くのアイテムに対して適切に機能しませんが、少なくともほぼすべてのブラウザと補助デバイスで使用できます）。

    ブログ投稿「<input type="country" />」では、国セレクタの標準化の複雑さについて説明しています。国名のローカライズも問題になる可能性があります。国リストには、国コードと国名を複数の言語と形式でダウンロードするためのツールがあります。