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

คลิกดูแอปเพื่อดูตัวอย่างแบบฟอร์มการชำระเงิน

  • แบบฟอร์มทำงานได้ดีพอไหม
  • มีสิ่งใดที่คุณต้องการเปลี่ยนแปลงเพื่อให้ทำงานได้ดีขึ้นไหม
  • บนอุปกรณ์เคลื่อนที่ล่ะ

คลิกดูซอร์สโค้ดเพื่อกลับไปที่ซอร์สโค้ด

ขั้นตอนที่ 2: ออกแบบสำหรับอุปกรณ์เคลื่อนที่และเดสก์ท็อป

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

คุณต้องตรวจสอบว่าแบบฟอร์มทำงานได้ดีในอุปกรณ์ต่างๆ โดยปรับระยะห่างจากขอบ ระยะขอบ และขนาดแบบอักษร

คัดลอก CSS ทั้งหมดด้านล่างแล้ววางลงในไฟล์ css/main.css ของคุณเอง

ซึ่งเป็น CSS จำนวนมาก สิ่งที่ควรทราบหลักๆ คือการเปลี่ยนแปลงขนาด

  • ระบบจะเพิ่ม padding และ margin ลงในอินพุต
  • font-size และค่าอื่นๆ จะแตกต่างกันไปตามขนาดวิวพอร์ต

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

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

CSS ให้ความสำคัญกับอุปกรณ์เคลื่อนที่เป็นอันดับแรก

  • CSS เริ่มต้นมีไว้สำหรับวิวพอร์ตที่มีความกว้างน้อยกว่า 400px
  • Media Queries ใช้เพื่อลบล้างค่าเริ่มต้นสำหรับวิวพอร์ตที่มีความกว้างอย่างน้อย 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>

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

ภาพหน้าจอ 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

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

ตอนนี้แบบฟอร์มการชำระเงินที่สมบูรณ์แล้วควรมีลักษณะดังนี้

ก้าวต่อไป

โปรดพิจารณาฟีเจอร์แบบฟอร์มที่สำคัญต่อไปนี้ที่ไม่ได้กล่าวถึงในโค้ดแล็บนี้

  • ลิงก์ไปยังเอกสารข้อกำหนดในการให้บริการและนโยบายความเป็นส่วนตัว: อธิบายให้ผู้ใช้ทราบอย่างชัดเจนว่าคุณปกป้องข้อมูลของผู้ใช้อย่างไร

  • สไตล์และการสร้างแบรนด์: ตรวจสอบว่าสิ่งเหล่านี้ตรงกับส่วนอื่นๆ ในเว็บไซต์ เมื่อป้อนชื่อและที่อยู่ รวมถึงชำระเงิน ผู้ใช้ต้องรู้สึกสบายใจและมั่นใจว่ายังอยู่ในที่ที่ถูกต้อง

  • การวิเคราะห์และการตรวจสอบผู้ใช้จริง: ช่วยให้ทดสอบและตรวจสอบประสิทธิภาพและความสามารถในการใช้งานของการออกแบบแบบฟอร์มสำหรับผู้ใช้จริงได้