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 の後半では、 必要があります。

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

  • フォームは現状のままで十分ですか？
  • パフォーマンスを高めるために変更すべきことはありますか？
  • モバイルではどうでしょうか

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

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

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

さまざまなデバイスでフォームが適切に機能するように、パディング、余白、 追加できます

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

多数の CSS が含まれています。主な注意点としては、次のようなサイズの変更が挙げられます。

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

準備ができたら、[View App] をクリックして、スタイル付きのフォームを表示します。また、枠線は 調整され、display: block; がラベルに使用されるため、1 行で記述できます。 全幅入力が可能です。ログイン フォームに関するおすすめの方法 でこの方法のメリットを詳しく説明します。

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

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

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

ウェブ向けのアプリを作成する際は、さまざまなデバイスとビューポートのサイズでテストする必要があります。これで、 小さな不具合で使えなくなる可能性があるためです。常に調整し、 CSS ブレークポイント（CSS ブレークポイント）が、 コンテンツ、対象デバイスに応じて異なります。

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

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

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

アプリをもう一度表示し、[カード番号] フィールドをタップまたはクリックします。使用するデバイスや すると、以下のように、ブラウザ用に保存されているお支払い方法を示す選択ツールが表示されます。

<ph type="x-smartling-placeholder">
</ph> Android スマートフォンの Chrome に表示された支払いフォームのスクリーンショット 2 枚。1 つ目は、組み込みのブラウザの支払いカード セレクタです。もう 1 つはプレースホルダの自動入力値を表示します
組み込みのブラウザ決済選択ツールと自動入力。

お支払い方法を選択してセキュリティ コードを入力すると、 フォームに追加した支払いカードの autocomplete の値:

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

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

また、モバイル デバイスでは、 カード番号欄これは inputmode="numeric" を使用したためです。数値フィールドの場合は 数字を入力しやすく、数字以外の文字は入力できないため、 入力するデータの種類を覚えておく必要があります。

利用可能なすべての autocomplete 値をお支払いフォームに正しく追加することが非常に重要です。です。 サイトでカードの有効期限の autocomplete 値や、 表示されます。1 つの autofill 値が間違っているか欠落している場合、ユーザーは実際の値を取得する必要があります。 手作業でカードデータを入力すると、販売機会を失う可能性があります。お支払いフォームに自動入力する場合 が正常に機能しません。ユーザーは、スマートフォンに支払いカード情報を記録しておくこともできます。 コンピュータは保護されません。

フィールドを空にして、お支払いフォームを送信してください。ブラウザは、不足している情報の入力を完了するように求められます。 分析できます次に、[Card number] フィールドの値に文字を追加して、フォームを送信してみます。「 値が無効であるとブラウザが警告します。これは、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 では説明しない、以下の重要なフォーム機能を検討してください。

  • 利用規約とプライバシー ポリシーに関するドキュメントへのリンク: 保護する必要があります。

  • スタイルとブランディング: これらがサイトの他の部分とマッチするようにします。名前と住所の入力時 支払いを行うときも、ユーザーは安心し、その場にいると安心する必要があります。

  • 分析と実際のユーザーのモニタリング: フォームのデザインのパフォーマンスとユーザビリティを、実際のユーザーを対象にテスト、モニタリングできます。