付款表單最佳做法程式碼研究室

本程式碼研究室將說明如何建構安全、容易使用且方便使用的付款方式。

步驟 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>。在本程式碼研究室的後續部分,您將瞭解如何使用這些元素存取瀏覽器功能。

按一下「查看應用程式」,即可預覽付款表單。

  • 表單是否能正常運作?
  • 有什麼可以改進,讓這項功能運作得更好嗎?
  • 如何在行動裝置上放送?

按一下「檢視原始碼」以返回原始碼。

步驟 2:為行動裝置和電腦設計

您新增的 HTML 是有效的,但預設的瀏覽器樣式會讓表單難以使用,尤其是在行動裝置上。而且看起來不會太好看。

調整邊框間距、邊界和字型大小,確保表單在各種裝置上都能正常運作。

複製下方的所有 CSS,並貼到您自己的 css/main.css 檔案中。

這可是一大堆 CSS!主要需要注意的是尺寸變更:

  • 已將 paddingmargin 新增至輸入內容。
  • font-size 和其他值會因可視區域大小而異。

準備就緒後,按一下「查看應用程式」,即可查看樣式化表單。您也會發現邊框已調整,且 display: block; 會用於標籤,讓標籤獨立於一行,且輸入內容可為全寬。如要進一步瞭解這種做法的優點,請參閱登入表單最佳做法

:invalid 選取器的用途是指出輸入內容含有無效值。(您會在程式碼研究室後續步驟中使用這個值。)

CSS 是行動優先:

  • 預設 CSS 適用於寬度小於 400px 的可視區域。
  • 媒體查詢是用來覆寫寬度至少為 400px 的可視區域預設值,並在寬度至少為 500px 的可視區域再次套用預設值。這個 API 應該適用於小型手機、大螢幕行動裝置和電腦。

無論您為網頁建構內容時,都必須在不同裝置和可視區域大小上進行測試。這一點尤其適用於表單,因為一個小小的錯誤就可能導致表單無法使用。請務必調整 CSS 中斷點,確保其能與內容和目標裝置搭配良好運作。

  • 畫面上是否顯示整份表單?
  • 表單輸入欄位是否足夠大?
  • 所有文字易讀嗎?
  • 您是否發現使用實體行動裝置與在 Chrome 開發人員工具的裝置模式中查看表單之間有任何差異?
  • 是否需要調整中斷點?

有幾種方法可以在不同裝置上測試表單:

步驟 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 應用程式中的付款表單螢幕截圖。一個顯示內建瀏覽器付款卡片選取器,另一個則顯示預留位置自動填入的值。
內建瀏覽器付款選擇器和自動填入功能。

選取付款方式並輸入安全碼後,瀏覽器會使用您在表單中新增的付款卡 autocomplete 值自動填入表單:

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

許多瀏覽器也會檢查並確認信用卡號碼和安全碼的有效性。

在行動裝置上,只要輕觸卡號欄位,就會看到數字鍵盤。這是因為您使用了 inputmode="numeric"。對於數值欄位,這項功能可讓使用者更輕鬆地輸入數字,並防止輸入非數字字元,提醒使用者記得輸入的資料類型。

請務必正確在付款表單中加入所有可用的 autocomplete 值。網站經常會遺漏卡片到期日和其他欄位的 autocomplete 值。如果單一 autofill 值有誤或缺少,使用者就必須取出實體卡片,手動輸入卡片資料,而您可能會因此失去銷售機會。如果付款表單上的自動填入功能無法正常運作,使用者可能會選擇在手機或電腦上記錄付款卡詳細資料,這非常不安全。

請嘗試提交含有空白欄位的付款表單。瀏覽器會提示完成遺漏的資料。請在「卡號」欄位的值中加入一個字母,然後嘗試提交表單。瀏覽器會警告值無效。這是因為您使用 pattern 屬性為欄位指定有效值。maxlength 和其他驗證限制也適用相同的做法,而且不需要 JavaScript。

您的付款表單現在應如下所示:

  • 請嘗試移除 autocomplete 值,然後填寫付款表單。您遇到什麼困難?
  • 嘗試在網路商店中使用付款表單。思考哪些做法成效良好,哪些做法成效不彰。是否有任何常見問題或最佳做法需要遵循?

步驟 4:提交表單後停用付款按鈕

建議您在使用者輕觸或點選提交按鈕後停用提交按鈕,尤其是在使用者付款時。許多使用者會反覆輕觸或點選按鈕,即使按鈕運作正常也一樣。否則可能會導致付款處理程序發生問題,造成伺服器負載增加。

js/main.js 檔案中加入下列 JavaScript:

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 以設定焦點和顯示提示。取消註解程式碼,然後試用。您必須為 someregexmessage 設定適當的值,並為 someField 設定值。

  • 為了找出改善表單的方法,您會監控哪些數據分析和即時使用者監控資料

完整的付款表單現在應如下所示:

進一步

請考慮使用本程式碼研究室未涵蓋的重要表單功能:

  • 連結至服務條款和隱私權政策文件:向使用者清楚說明您如何保護使用者的資料。

  • 樣式與品牌:請確保這些項目與網站的其他部分相符。輸入姓名和地址及付款時,使用者必須感到安心,並相信自己仍在正確的頁面。

  • 數據分析和真實使用者監控:啟用表單設計的效能和可用性,以便進行測試並監控真實使用者的行為。