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