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

Sam Dutton

本程式碼研究室將說明如何建立安全、可存取且易於使用的付款表單。

步驟 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>。在本程式碼研究室的後續章節中，您將瞭解使用這些元素可以存取的瀏覽器功能。

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

  • 表單是否能正常運作？
  • 你覺得有什麼地方可以改進？
  • 在行動裝置上呢？

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

步驟 2：設計行動版和電腦版網站

您新增的 HTML 有效，但預設的瀏覽器樣式設定會導致表單難以使用，特別是在行動裝置上。而且這款應用程式的外觀也不夠好。

您必須調整邊框間距、邊界和字型大小，確保表單在各種裝置上都能正常顯示。

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

有太多的 CSS！需要注意的重點事項如下：

  • 將 padding 和 margin 新增至輸入內容。
  • 針對不同的可視區域大小，font-size 和其他值並不相同。

準備就緒後，按一下「View App」即可查看樣式化表單。您也會注意到邊界有所調整，且 display: block; 用於標籤，因此會在線條本身中代表一行，而輸入的內容可以是完整寬度。登入表單最佳做法會詳細說明這個方法的優點。

:invalid 選取器可用來表示輸入內容的值無效。(稍後您將在程式碼研究室中用到此項目。)

CSS 為行動優先：

  • 預設 CSS 適用於寬度小於 400px 的可視區域。
  • 媒體查詢可用來覆寫寬度至少 400px 的可視區域的預設值，以及寬度至少為 500px 的可視區域的預設值。這項做法在小型手機、大螢幕行動裝置和電腦上都能順暢運作。

每次建構網頁時，您都需要以不同的裝置和可視區域大小進行測試。這對表單而言尤其明顯，因為只要出現小小的故障就可能無法使用。建議您一律調整 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 來設定焦點及顯示提示。取消註解程式碼並試用。您需要為 someregex 和 message 設定適當的值，並設定 someField 的值。

  • 為了找出改善表單的方式，您會監控哪些分析和真實使用者監控資料？

您完整的付款表單應如下所示：

進一步探索

請參考本程式碼研究室未涵蓋的重要表單功能：

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

  • 樣式和品牌：請確保這些元素與網站的其他元素相符。輸入姓名和地址及付款時，使用者必須感到安心，相信自己仍放在正確的地方。

  • Analytics (分析) 和真實使用者監控：讓開發人員測試及監控表單設計的效能和可用性。