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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

วันที่

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