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