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

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> 元素中，且每個都有一個標籤。「Complete Payment」按鈕是 HTML 程式碼， <button>。在本程式碼研究室的後續部分，您將學習使用 這些元素

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

  • 表單的功能是否恰當？
  • 你認為有哪些地方需要改進？
  • 如何在行動裝置上放送？

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

步驟 2：設計行動裝置和電腦專用應用程式

您新增的 HTML 有效，但預設的瀏覽器樣式會導致表單難以使用 行動裝置。而且看起來不會太好看。

請調整邊框間距、邊界和 字型大小

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

大量 CSS！請特別注意大小異動：

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

準備就緒後，按一下「查看應用程式」，即可查看樣式化表單。您也會發現 已經過調整，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。

  • 哪些數據分析和即時使用者監控資料 會觀察您是否有找出改善表單的方法？

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

再升級

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

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

  • 樣式與品牌：請確保這些項目與網站的其他部分相符。輸入姓名和地址時 並付款，使用者得安心，因為他們仍待在適當的地方。

  • 數據分析與真實使用者監控： 方便真人使用者測試及監控表單設計的效能和可用性。