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

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 の後半では、これらの要素を使用してアクセスできるブラウザ機能について説明します。

注: <input> 要素には閉じタグがありません。これは、これらの要素がvoid（空）要素であり、それ自体にコンテンツがないためです。空要素の末尾にある「/」文字は省略可能です。<input> または <input /> のいずれかを使用できます。

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

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

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

ステップ 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>

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

Android スマートフォンの Chrome で表示された支払いフォームのスクリーンショット 2 枚。1 つは、ブラウザに組み込まれている支払いカード選択ツールを表示しています。もう 1 つは、プレースホルダの自動入力値を表示しています。 — ブラウザに組み込まれたお支払い方法の選択ツールと自動入力。

お支払い方法を選択してセキュリティコードを入力すると、フォームに追加した支払いカードの 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 では扱わなかった、フォームの重要な機能は次のとおりです。

利用規約とプライバシーポリシーのドキュメントへのリンク: データの保護方法をユーザーに明確に示します。
スタイルとブランディング: サイトの他の部分と一致するようにします。名前と住所を入力して支払いを行う際、ユーザーは、自分が正しい場所にいると信頼して安心できる必要があります。
アナリティクスとリアルユーザーモニタリング: フォームのデザインのパフォーマンスとユーザビリティを実際のユーザーでテストしてモニタリングできます。