Codelab: 支払いフォームに関するおすすめの方法

Sam Dutton

この Codelab では、安全でアクセスしやすく、使いやすいお支払いフォームを作成する方法について説明します。

ステップ 1: HTML を意図したとおりに使用する

ジョブ用に作成された要素を使用します。

• <form>
• <section>
• <label>
• <input>、<select>、<textarea>
• <button>

これらの要素により、組み込みのブラウザ機能が有効になり、アクセシビリティが改善され、マークアップに意味が付加されます。

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

index.html にあるフォームの HTML を確認します。

<form action="#" method="post">

  <h1>Payment form</h1>

  <section>
    <label>Card number</label>
    <input>
  </section>

  <section>
    <label>Name on card</label>
    <input>
  </section>

  <section id="cc-exp-csc">
    <div>
      <label>Expiry date</label>
      <input>
    </div>
    <div>
      <label>Security code</label>
      <input>
      <div class="explanation">Last 3 digits on back of card</div>
    </div>
  </section>

  <button id="complete-payment">Complete payment</button>

</form>

カード番号、カード名、有効期限、セキュリティ コードの <input> 要素があります。これらはすべて <section> 要素でラップされており、それぞれにラベルが付いています。[完了] ボタンは HTML の <button> です。この Codelab の後半では、これらの要素を使用してアクセスできるブラウザ機能について説明します。

[アプリを表示] をクリックして、お支払いフォームをプレビューします。

• フォームはそのままで十分に機能しますか？
• より効果的に機能させるために、変更したい点はありますか？
• モバイルではどうでしょうか

[ソースを表示] をクリックして、ソースコードに戻ります。

ステップ 2: モバイルとパソコン向けに設計する

追加した HTML は有効ですが、ブラウザのデフォルトのスタイル設定により、特にモバイルではフォームが使いづらくなります。あまり良いようには見えません。

パディング、余白、フォントサイズを調整して、さまざまなデバイスでフォームが適切に動作するようにする必要があります。

以下の CSS をすべてコピーして、css/main.css ファイルに貼り付けます。

大量の CSS ですが、主な変更点はサイズの変更です。

• padding と margin が入力に追加されます。
• font-size などの値は、ビューポートのサイズによって異なります。

準備ができたら、[View App] をクリックして、スタイル設定されたフォームを表示します。また、境界線が調整され、ラベルに display: block; が使用されているため、ラベルが 1 行に表示され、入力はフル幅にできます。ログイン フォームのベスト プラクティスでは、このアプローチのメリットについて詳しく説明しています。

:invalid セレクタは、入力に無効な値がある場合を示すために使用されます。（これはこの Codelab の後半で使用します）。

CSS はモバイル ファーストです。

• デフォルトの CSS は、幅が 400px 未満のビューポート用です。
• メディアクエリは、幅が 400px 以上のビューポートのデフォルトをオーバーライドするために使用されます。また、幅が 500px 以上のビューポートのデフォルトをオーバーライドするために使用されます。これは、小型のスマートフォン、大画面のモバイル デバイス、デスクトップで適切に機能します。

ウェブ向けに作成する場合は、さまざまなデバイスとビューポート サイズでテストする必要があります。小さな問題によってフォームが使用不能になることがあるため、これは特にフォームの場合に該当します。CSS ブレークポイントは、コンテンツとターゲット デバイスで適切に機能するように常に調整する必要があります。

• フォーム全体が表示されていますか？
• フォームの入力項目は十分な大きさか？
• テキストはすべて読みやすいでしょうか。
• 実際のモバイル デバイスを使用する場合と、Chrome DevTools のデバイスモードでフォームを表示する場合に違いはありましたか？
• ブレークポイントを調整する必要はありましたか？

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

• Chrome DevTools の Device Mode を使用して、モバイル デバイスをシミュレートします。
• パソコンからスマートフォンに URL を送信します。
• BrowserStack などのサービスを使用して、さまざまなデバイスとブラウザでテストします。

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

ブラウザで入力値の保存と自動入力を行えるようにし、組み込みの安全な支払い機能と検証機能にアクセスできるようにします。

index.html ファイルのフォームに属性を追加して、次のようにします。

<form action="#" method="post">

  <h1>Payment form</h1>

  <section>
    <label for="cc-number">Card number</label>
    <input id="cc-number" name="cc-number" autocomplete="cc-number" inputmode="numeric" pattern="[\d ]{10,30}" required>
  </section>

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

  <section id="cc-exp-csc">
    <div>
      <label for="cc-exp">Expiry date</label>
      <input id="cc-exp" name="cc-exp" autocomplete="cc-exp" placeholder="MM/YY" maxlength="5" required>
    </div>
    <div>
      <label for="cc-csc">Security code</label>
      <input id="cc-csc" name="cc-csc" autocomplete="cc-csc" inputmode="numeric" maxlength="3" required>
      <div class="explanation">Back of card, last 3 digits</div>
    </div>
  </section>

  <button id="complete-payment">Complete payment</button>

</form>

アプリをもう一度表示し、[カード番号] フィールドをタップまたはクリックします。デバイスとプラットフォームによっては、ブラウザに保存されているお支払い方法が表示される選択ツールが表示されることがあります（以下を参照）。

お支払い方法を選択してセキュリティ コードを入力すると、フォームに追加した支払いカードの autocomplete 値を使用して、ブラウザがフォームに自動入力します。

• cc-number
• cc-name
• cc-exp
• cc-csc

多くのブラウザでは、クレジット カード番号とセキュリティ コードの有効性も確認されます。

また、モバイル デバイスでは、[カード番号] フィールドをタップするとすぐに数字キーボードが表示されます。これは、inputmode="numeric" を使用したためです。数値フィールドでは、数値の入力が容易になり、数値以外の文字を入力できなくなります。また、入力するデータの種類をユーザーに思い出させる効果もあります。

利用可能なすべての autocomplete 値を支払いフォームに正しく追加することが非常に重要です。カードの有効期限などのフィールドに autocomplete 値が指定されていないサイトは非常に多いです。1 つの autofill 値が間違っているか欠落している場合、ユーザーは実際のカードを取り出してカードデータを手動で入力する必要があり、販売機会を失う可能性があります。支払いフォームの自動入力が適切に機能しない場合は、ユーザーがスマートフォンやパソコンに支払いカード情報を記録しておくという選択をすることもありますが、これは安全性が非常に低いためです。

フィールドを空にして、お支払いフォームを送信してみてください。不足しているデータを入力するようブラウザに求められます。[カード番号] 欄の値に文字を追加して、フォームを送信してみてください。ブラウザは、値が無効であることを警告します。これは、pattern 属性を使用してフィールドに有効な値を指定したために発生します。maxlength やその他の検証制約でも同様に機能します。JavaScript は必要ありません。

支払いフォームは次のようになります。

• autocomplete の値を削除して、お支払いフォームに記入してみてください。どのような問題に直面していますか
• オンライン ショップでのお支払いフォームをお試しください。うまくいった点とうまくいかなかった点を検討します。一般的な問題や、従うべきベスト プラクティスはありますか？

ステップ 4: フォームが送信されたら支払いボタンを無効にする

ユーザーが送信ボタンをタップまたはクリックした後は、特にユーザーが支払いを行う場合は、送信ボタンを無効にすることを検討してください。多くのユーザーは、ボタンが正常に機能していても、ボタンを繰り返しタップまたはクリックします。これにより、お支払い処理に問題が生じ、サーバー負荷が増加する可能性があります。

次の JavaScript を js/main.js ファイルに追加します。

const form = document.querySelector('form');
const completePaymentButton = document.querySelector('button#complete-payment');

form.addEventListener('submit', handleFormSubmission);

function handleFormSubmission(event) {
  event.preventDefault();
  if (form.checkValidity() === false) {
    // Handle invalid form data.
  } else {
    completePaymentButton.textContent = 'Making payment...';
    completePaymentButton.disabled = 'true';
    setTimeout(() => {alert('Made payment!');}, 500);
  }
}

お支払いフォームを送信して、どうなるか確認します。

コメントと validate() 関数を追加したコードは次のようになります。

• JavaScript には、データ検証のためにコメントアウトされたコードが含まれています。このコードは、Constraint Validation API（幅広くサポートされている）を使用してカスタム検証を追加し、組み込みのブラウザ UI にアクセスして、フォーカスの設定とプロンプトの表示を行います。コードのコメント化を解除して、試してみます。someregex と message に適切な値を設定し、someField の値を設定する必要があります。

• フォームを改善する方法を特定するには、どの分析データと Real User Monitoring データをモニタリングするか。

支払いフォームは次のようになります。

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

詳細

この Codelab では扱わなかった、フォームの重要な機能は次のとおりです。

• 利用規約とプライバシー ポリシーのドキュメントへのリンク: データの保護方法をユーザーに明確に示します。

• スタイルとブランディング: サイトの他の部分と一致するようにします。名前と住所を入力して支払いを行う際、ユーザーは、自分が正しい場所にいると信頼して安心できる必要があります。

• アナリティクスとリアルユーザー モニタリング: フォームのデザインのパフォーマンスとユーザビリティを実際のユーザーでテストしてモニタリングできます。