หน้านี้ได้รับการแปลโดย Cloud Translation API

แนวทางปฏิบัติแนะนำสำหรับแบบฟอร์มการชำระเงินใน Codelab

Sam Dutton

Codelab นี้จะแสดงวิธีสร้างแบบฟอร์มการชำระเงินที่ปลอดภัย เข้าถึงได้ง่าย และใช้งานง่าย

ขั้นตอนที่ 1: ใช้ HTML ตามที่ตั้งใจไว้

ใช้องค์ประกอบที่สร้างขึ้นสำหรับงาน:

<form>
<section>
<label>
<input>, <select>, <textarea>
<button>

คุณจะเห็นว่าองค์ประกอบเหล่านี้เปิดใช้ฟังก์ชันของเบราว์เซอร์ในตัว ปรับปรุงการช่วยเหลือพิเศษ และเพิ่มความหมายให้กับมาร์กอัป

คลิกรีมิกซ์เพื่อแก้ไขเพื่อทำให้โปรเจ็กต์แก้ไขได้

ดู HTML สำหรับแบบฟอร์มของคุณใน index.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 และค่าอื่นๆ แตกต่างกันสำหรับขนาดวิวพอร์ตที่ต่างกัน

เมื่อพร้อมแล้ว ให้คลิกดูแอปเพื่อดูแบบฟอร์มที่มีการจัดรูปแบบ นอกจากนี้ คุณจะเห็นว่ามีการปรับเส้นขอบ และ display: block; ใช้สำหรับป้ายกำกับเพื่อให้แต่ละเส้นมีทิศทางเดียว และอินพุตจะมีความกว้างเต็มขนาดได้ แนวทางปฏิบัติแนะนำสำหรับแบบฟอร์มลงชื่อเข้าใช้จะอธิบายประโยชน์ของวิธีนี้อย่างละเอียด

ตัวเลือก :invalid ใช้เพื่อระบุว่าอินพุตมีค่าที่ไม่ถูกต้อง (คุณจะใช้ชื่อนี้ใน Codelab ในภายหลัง)

CSS เน้นอุปกรณ์เคลื่อนที่เป็นหลัก

CSS เริ่มต้นมีไว้สำหรับวิวพอร์ตที่กว้างน้อยกว่า 400px
คำค้นหาสื่อใช้เพื่อลบล้างค่าเริ่มต้นสำหรับวิวพอร์ตที่มีความกว้างอย่างน้อย 400px แล้วใช้อีกครั้งสำหรับวิวพอร์ตที่มีความกว้างอย่างน้อย 500px ซึ่งวิธีนี้ควรจะทำงานได้ดีสำหรับโทรศัพท์ขนาดเล็ก อุปกรณ์เคลื่อนที่ที่มีหน้าจอขนาดใหญ่ และบนเดสก์ท็อป

เมื่อใดก็ตามที่คุณสร้างเว็บ คุณจะต้องทดสอบบนอุปกรณ์และวิวพอร์ตขนาดต่างๆ โดยเฉพาะอย่างยิ่งสำหรับแบบฟอร์ม เพราะข้อบกพร่องเล็กๆ น้อยๆ อาจทำให้ใช้งานไม่ได้ คุณควรปรับเบรกพอยท์ CSS เสมอเพื่อให้แน่ใจว่าจะทำงานได้ดีกับเนื้อหาและอุปกรณ์เป้าหมาย

มองเห็นทั้งแบบฟอร์มไหม
อินพุตในแบบฟอร์มใหญ่พอไหม
ข้อความทั้งหมดอ่านได้ไหม
คุณสังเกตเห็นความแตกต่างระหว่างการใช้อุปกรณ์เคลื่อนที่จริงกับการดูแบบฟอร์มในโหมดอุปกรณ์ในเครื่องมือสำหรับนักพัฒนาเว็บใน Chrome ไหม
คุณต้องปรับเบรกพอยท์ไหม

คุณทดสอบแบบฟอร์มในอุปกรณ์ต่างๆ ได้หลายวิธีดังนี้

ใช้โหมดอุปกรณ์สำหรับเครื่องมือสำหรับนักพัฒนาเว็บใน Chrome เพื่อจำลองอุปกรณ์เคลื่อนที่
ส่ง 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>

ดูแอปอีกครั้งแล้วแตะหรือคลิกในช่องหมายเลขบัตร คุณอาจเห็นตัวเลือกแสดงวิธีการชำระเงินที่จัดเก็บไว้สำหรับเบราว์เซอร์ ทั้งนี้ขึ้นอยู่กับอุปกรณ์และแพลตฟอร์ม ดังเช่นตัวอย่างด้านล่าง

ภาพหน้าจอ 2 ภาพแสดงแบบฟอร์มการชำระเงินใน Chrome บนโทรศัพท์ Android รายการหนึ่งแสดงตัวเลือกบัตรสำหรับชำระเงินของเบราว์เซอร์ที่มีในตัว ส่วนอีกเครื่องแสดงค่าตัวยึดตำแหน่งที่ป้อนอัตโนมัติ — ตัวเลือกการชำระเงินของเบราว์เซอร์และการป้อนข้อความอัตโนมัติที่มีในตัว

เมื่อเลือกวิธีการชำระเงินและป้อนรหัสความปลอดภัยแล้ว เบราว์เซอร์จะป้อนแบบฟอร์มอัตโนมัติโดยใช้ค่า autocomplete ของบัตรสำหรับชำระเงินที่คุณเพิ่มลงในแบบฟอร์ม ดังนี้

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

นอกจากนี้ เบราว์เซอร์จำนวนมากยังตรวจสอบและยืนยันความถูกต้องของหมายเลขบัตรเครดิตและรหัสความปลอดภัย

บนอุปกรณ์เคลื่อนที่ คุณจะเห็นแป้นพิมพ์ตัวเลขทันทีที่แตะช่องหมายเลขบัตร เนื่องจากคุณใช้ inputmode="numeric" สำหรับช่องตัวเลข วิธีนี้จะช่วยให้ป้อนตัวเลขได้ง่ายขึ้นและป้อนอักขระที่ไม่ใช่ตัวเลขไม่ได้ และยังกระตุ้นให้ผู้ใช้จดจำประเภทข้อมูลที่กำลังป้อนอีกด้วย

การเพิ่มค่า autocomplete ที่มีอยู่ทั้งหมดลงในแบบฟอร์มการชำระเงินอย่างถูกต้องนั้นสำคัญอย่างยิ่ง เป็นเรื่องปกติที่เว็บไซต์จะพลาดค่า autocomplete สำหรับวันที่หมดอายุของบัตรและช่องอื่นๆ หากค่า 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 นี้

ลิงก์ไปยังเอกสารข้อกำหนดในการให้บริการและนโยบายความเป็นส่วนตัว: แจ้งให้ผู้ใช้ทราบอย่างชัดเจนว่าคุณปกป้องข้อมูลของผู้ใช้อย่างไร
สไตล์และการสร้างแบรนด์: ตรวจสอบว่าสิ่งเหล่านี้ตรงกับส่วนอื่นๆ ในเว็บไซต์ เมื่อป้อนชื่อและที่อยู่ และชำระเงิน ผู้ใช้ต้องรู้สึกสบายใจ เชื่อมั่นว่าตนเองยังอยู่ในที่ที่ถูกต้อง
Analytics และการตรวจสอบโดยผู้ใช้จริง: ช่วยให้ทดสอบและตรวจสอบผู้ใช้จริงเพื่อเพิ่มประสิทธิภาพและความสามารถในการใช้งานของการออกแบบแบบฟอร์มได้