このページは Cloud Translation API によって翻訳されました。

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 でページを再読み込みし、[名前] の入力をタップまたはクリックします。どのような違いがあるでしょうか？

注: Chrome で自動入力の候補を削除する方法について、* Windows: Shift + delete * Mac: Shift + fn + delete

わずかに変更されていることがわかります。autocomplete="name" により、候補が具体的になりました以前に autocomplete="name" もあったフォーム入力で使用されていた値。ブラウザ何が適切かを推測するだけでなく、自分でコントロールできます。[Manage...] も表示されます。オプションを使用して、ブラウザに保存されている名前や住所を表示、編集できます。

予測入力値のあるフォームと、予測入力値のないフォームを表示している Android スマートフォン上の Chrome のスクリーンショット 2 枚。1 つは、ブラウザ UI にヒューリスティックな提案値を示している。もう 1 つは、予測入力値が保存されている場合の UI です。 — 推測値による自動入力と予測入力の UI

で確認できます。

注: input、select、textarea に適切な予測入力値を使用できる場合は、それを使用してください。

ここで、制約検証属性を追加します。 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">

Enterkeyhint 入力属性によってキー入力ボタンのアイコンがどのように変化するかを示す、Android のフォームの 2 枚のスクリーンショット。 — Enterkeyhint 属性を使用して、Enter ボタンのラベルを設定します。 '次へ'「done」などです。

で確認できます。

type="number" を使用すると、番号をインクリメントするために上矢印と下矢印が追加されますが、これは電話、支払いカード、口座番号などのデータにとって意味がありません。電話番号には、代わりに type="tel" を使用してください。その他の数字については、type="text" を使用し（text がデフォルトであるためこの属性は省略）、inputmode="numeric" を追加するとモバイルで数字キーボードになります。

で確認できます。

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

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

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

Chrome DevTools のデバイスモードを使用するモバイルデバイスをシミュレートします。
パソコンから URL をスマートフォンに送信します。
BrowserStack などのサービスを使用して範囲をテストするさまざまなデバイスやブラウザに対応しています。

で確認できます。

さらに先へ

分析と実際のユーザーのモニタリング: フォームのデザインのパフォーマンスとユーザビリティを実際のユーザー向けにテスト、モニタリングできるようにする。変更が正常に行われたかどうかを確認します負荷パフォーマンスなどの Web Vitals をモニタリングする必要があります。ページ分析（フォームから直帰したが、フォームへの入力を完了せずに？ユーザーの閲覧時間など）やインタラクションの分析（どのページについてどのコンポーネントをユーザーが操作するか）
ユーザーはどこにいますか住所の形式住所にはどのような名前を使用しますか？コンポーネント（郵便番号など）ですか？住所に関するフランクの強制ガイドは、200 か国以上の住所形式に関する有用なリンクと詳細なガイダンスを提供します。
国セレクタは、ユーザビリティが低いことで知られています。項目が長い場合は、要素を選択しないことをおすすめします。また、ISO 3166 国コード規格では現在 249 か国がリストされています。 <select> の代わりに、次のような代替手段を検討できます。 Baymard Institute の国セレクタ。

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

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