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

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

Sam Dutton

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

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

หมายเหตุ: องค์ประกอบ <input> ไม่มีแท็กปิด นั่นเป็นเพราะองค์ประกอบเหล่านี้เป็นองค์ประกอบว่าง (ว่างเปล่า) ซึ่งไม่มีเนื้อหาใดๆ ในตัว คุณจะใช้อักขระ "/" ที่ท้ายองค์ประกอบ Void หรือไม่ก็ได้ โดยจะใช้ <input> หรือ <input /> ก็ได้

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

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

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

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

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

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

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

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

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

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

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

CSS เป็นแบบอุปกรณ์เคลื่อนที่เป็นอันดับแรก

CSS เริ่มต้นมีไว้สำหรับวิวพอร์ตที่มีความกว้างน้อยกว่า 400px
Media Queries ใช้เพื่อลบล้างค่าเริ่มต้นสำหรับวิวพอร์ตที่มีความกว้างอย่างน้อย 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
คุณควรตรวจสอบข้อมูลการวิเคราะห์และข้อมูลการตรวจสอบผู้ใช้จริงใดเพื่อหาวิธีปรับปรุงแบบฟอร์ม

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

ลองใช้แบบฟอร์มในอุปกรณ์ต่างๆ คุณกําลังกําหนดเป้าหมายอุปกรณ์และเบราว์เซอร์ใด ปรับปรุงแบบฟอร์มให้ดีขึ้นได้อย่างไร

การดำเนินการเพิ่มเติม

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

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