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> 要素でラップされ、それぞれにラベルがあります。[Complete Payment] ボタンは HTML <button> です。これらの要素を使用してアクセスできるブラウザ機能については、この Codelab の後半で説明します。

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

• フォームは今のところ十分に機能していますか？
• 今後の改善のために、何か変更して欲しいことはありますか？
• モバイルではどうでしょうか？

[View Source] をクリックしてソースコードに戻ります。

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

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

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

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

これは大量の CSS です。主な注意点として、サイズの変更があります。

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

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

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

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

• デフォルトの CSS は幅 400px 未満のビューポート用です。
• メディアクエリを使用して、幅が 400px 以上のビューポートのデフォルトをオーバーライドし、さらに 500px 以上の幅のビューポートでデフォルトをオーバーライドします。これは、小型のスマートフォン、画面の大きなモバイル デバイス、パソコンに適しています。

ウェブ用に開発するときは、常にさまざまなデバイスとビューポート サイズでテストする必要があります。これは特にフォームに当てはまります。1 つの小さな不具合で使えなくなることがあるからです。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 では扱っていない、次の重要なフォーム機能を検討してください。

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

• スタイルとブランディング: サイトの他の部分と調和するスタイルにします。ユーザーが名前と住所を入力して支払いを行う際は、その場にいるという安心感を持って行う必要があります。

• 分析と実際のユーザーのモニタリング: フォーム設計のパフォーマンスとユーザビリティを、実際のユーザーがテストしてモニタリングできるようにします。