さまざまな名前と住所の形式に対応するフォームを作成するには、どうすればよいでしょうか。フォームに軽微なミスがあると、ユーザーに不快感を与え、サイトから離れたり、購入や登録の完了をあきらめたりする可能性があります。
この Codelab では、ほとんどのユーザーにとって使いやすい、アクセスしやすいフォームを作成する方法を説明します。
ステップ 1: HTML 要素と属性を最大限に活用する
Codelab のこのパートは、空のフォームから始めます。見出しとボタンだけを用意します。次に、入力を追加します。（CSS と少量の JavaScript はすでに組み込まれています）。
[Remix to Edit] をクリックしてプロジェクトを編集可能にします。
次のコードを使用して、
<form>要素に name フィールドを追加します。
<section>
<label for="name">Name</label>
<input id="name" name="name">
</section>
これは 1 つの名前フィールドだけでは複雑で繰り返しが多いように見えますが、すでに多くの処理が行われています。
label の for 属性を input の name または id と照合して、label を input に関連付けます。ラベルをタップまたはクリックすると、フォーカスが入力に移動し、それ自体が入力よりもはるかに大きなターゲットになります。これは、指、親指、マウスのクリックに適しています。ラベルまたはラベルの入力がフォーカスされると、スクリーン リーダーはラベルテキストを読み上げます。
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" を持つフォーム入力で使用されていた特定の値になります。ブラウザは、何が適切であるかを推測するだけではありません。ユーザーがコントロールできます。また、ブラウザに保存されている名前とアドレスを表示および編集するための [管理] オプションもあります。
次に、制約検証属性の 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 値にもかかわらず）単一の国ではないため、[Country] の代わりに [Country or region] というラベルが使用されます。
ステップ 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"は、モバイル キーボードの入力キーラベルを設定し、これが最後のフィールドであり、フォームを送信できるようになったことを示します（デフォルトはnext）。
完成した住所フォームは次のようになります。
- さまざまなデバイスでフォームをテストします。ターゲットとするデバイスとブラウザフォームを改善すべき点を教えてください。
さまざまなデバイスでフォームをテストするには、いくつかの方法があります。
- Chrome DevTools Device Mode を使用して、モバイル デバイスをシミュレートします。
- パソコンからスマートフォンに URL を送信します。
- BrowserStack などのサービスを使用して、さまざまなデバイスやブラウザでテストします。
さらに先へ
分析と実際のユーザーのモニタリング: フォーム設計のパフォーマンスとユーザビリティを実際のユーザーでテストおよびモニタリングし、変更が有効かどうかを確認します。読み込みパフォーマンスやその他のウェブに関する指標をモニタリングする必要があります。また、ページ分析（住所フォームの入力を完了せずに戻ってくるユーザーの割合、ユーザーが住所フォームページに費やす時間の長さ）、インタラクション分析（ユーザーがどのページ コンポーネントを利用しているかどうか）もモニタリングする必要があります。
ユーザーはどこにいますか住所の形式郵便番号など、住所項目に使用されている名前は何ですか？Frank's Compulsive Guide to Postal Addresses には、200 か国以上の住所形式について、便利なリンクと広範なガイダンスが記載されています。
国セレクタは、ユーザビリティが低いことでよく知られています。アイテム数が多い場合は、要素を選択しないようにすることをおすすめします。また、ISO 3166 の国コード標準では現在 249 か国がリストされています。
<select>の代わりに、Baymard Institute の国セレクタなどの代替手段を検討することをおすすめします。アイテムの数が多いリストのセレクタを改善できますか？さまざまなデバイスやプラットフォームで設計にアクセスできるようにするには どうすればよいでしょうか（
<select>要素は多数のアイテムでは適切に機能しませんが、少なくとも、ほぼすべてのブラウザと支援デバイスで使用できます）。国セレクタの標準化の複雑さについては、ブログ投稿 <input type="country" /> で説明しています。国名のローカライズも問題になることがあります。国のリストには、国コードと国名を複数の言語で複数の形式でダウンロードできるツールがあります。