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 の値を設定する必要があります。

• フォームの改善方法を特定するために、どのような分析データとリアルユーザー モニタリング データをモニタリングしますか。

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

• さまざまなデバイスでフォームを試す。ターゲットとするデバイスとブラウザフォームを改善するにはどうすればよいですか？

詳細

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

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

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

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