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