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>
ดูแอปของคุณอีกครั้ง จากนั้นแตะหรือคลิกในช่องหมายเลขบัตร ขึ้นอยู่กับอุปกรณ์และ คุณอาจเห็นตัวเลือกแสดงวิธีการชำระเงินที่จัดเก็บไว้สำหรับเบราว์เซอร์ เหมือนกับที่แสดงอยู่ด้านล่าง
![ภาพหน้าจอ 2 ภาพที่แสดงแบบฟอร์มการชำระเงินใน Chrome บนโทรศัพท์ Android ไอคอนแรกแสดงตัวเลือกบัตรสำหรับชำระเงินในเบราว์เซอร์ อีกอันหนึ่งจะแสดงค่าที่เติมตัวยึดตำแหน่งโดยอัตโนมัติ](https://web.dev/static/articles/codelab-payment-form-best-practices/image/two-screenshots-a-paymen-0c2e6e2be4f9d.png?authuser=7&hl=th)
เมื่อคุณเลือกวิธีการชำระเงินและป้อนรหัสความปลอดภัยแล้ว เบราว์เซอร์จะป้อนแบบฟอร์มโดยอัตโนมัติโดยใช้
ค่า 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 และการตรวจสอบผู้ใช้จริง: ช่วยให้สามารถทดสอบและตรวจสอบประสิทธิภาพและความสามารถในการใช้งานของการออกแบบแบบฟอร์มสำหรับผู้ใช้จริงได้