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

Sam Dutton

さまざまな名前や住所の形式に適したフォームを設計するにはどうすればよいですか。短形式 不具合によりユーザーをイライラさせ、ユーザーがサイトから離れたり、購入をあきらめたりする原因となる 。

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

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

Codelab のこのパートは、空のフォームから始まり、見出しとボタンだけが表示されます。 考えてみましょう次に、入力を追加します。（CSS と JavaScript の一部は、 included.)

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

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

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

1 つの名前フィールドだけでは複雑で繰り返しの多い作業に思えるかもしれませんが、すでに多くのことが行われています。

label の for 属性をlabelinput input さんの name または id。ラベルをタップまたはクリックすると入力にフォーカスが移動し、ラベルが 指や親指、マウスのクリックに適しています。スクリーンリーダー ラベルまたはラベルの入力がフォーカスされると、ラベルのテキストが読み上げられます。

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" もあったフォーム入力で使用されていた値。ブラウザ 何が適切かを推測するだけでなく、自分でコントロールできます。[Manage...] も表示されます。 オプションを使用して、ブラウザに保存されている名前や住所を表示、編集できます。

<ph type="x-smartling-placeholder">
</ph> 予測入力値のあるフォームと、予測入力値のないフォームを表示している Android スマートフォン上の Chrome のスクリーンショット 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」などの名前は 「invalid」です。値 \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>

郵便番号 [Postal code] は省略可能ですが、これは、多くの国では郵便番号を使用していないためです。 （Global Sourcebook では、 サンプル住所を含む 194 か国の住所形式に対応）[国または Country ではなく region を使用します。これは、完全なリストに含まれる一部のオプション（ 英国など）は、（autocomplete 値にかかわらず）単一の国ではありません。

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

作成した住所フォームは機能が多く、サイトに 2 つ以上の住所が必要な場合はどうすればよいでしょうか。 送付先住所、請求先情報など、顧客が入力できるようにフォームを更新してください 送付先住所と請求先住所があります。できるだけ迅速かつ簡単にデータを入力するには 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）。
で確認できます。 <ph type="x-smartling-placeholder">
</ph> Enterkeyhint 入力属性によってキー入力ボタンのアイコンがどのように変化するかを示す、Android のフォームの 2 枚のスクリーンショット。
Enterkeyhint 属性を使用して、Enter ボタンのラベルを設定します。 '次へ'「done」などです。
で確認できます。 で確認できます。

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

  • さまざまなデバイスでフォームをお試しください。どのようなデバイスとブラウザをターゲットに設定していますか？どうやって フォームを改善できるでしょうか。

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

で確認できます。

さらに先へ

  • 分析と実際のユーザーのモニタリング: フォームのデザインのパフォーマンスとユーザビリティを実際のユーザー向けにテスト、モニタリングできるようにする。 変更が正常に行われたかどうかを確認します負荷パフォーマンスなどの Web Vitals をモニタリングする必要があります。 ページ分析（フォームから直帰したが、フォームへの入力を完了せずに ？ユーザーの閲覧時間など）やインタラクションの分析（どのページについて どのコンポーネントをユーザーが操作するか）

  • ユーザーはどこにいますか住所の形式住所にはどのような名前を使用しますか？ コンポーネント（郵便番号など）ですか？住所に関するフランクの強制ガイド は、200 か国以上の住所形式に関する有用なリンクと詳細なガイダンスを提供します。

  • 国セレクタは、ユーザビリティが低いことで知られています。 項目が長い場合は、要素を選択しないことをおすすめします。 また、ISO 3166 国コード規格では現在 249 か国がリストされています。 <select> の代わりに、次のような代替手段を検討できます。 Baymard Institute の国セレクタ。

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

    ブログ投稿 <input type="国"/> が説明 国セレクタの標準化の複雑さを軽減します国名のローカライズは 問題になります。国のリストには、 複数の言語、複数の形式で国コードと名前をダウンロードする