เผยแพร่เมื่อวันที่ 8 พฤศจิกายน 2023
อินพุตของผู้ใช้เป็นหนึ่งในข้อกังวลที่ละเอียดอ่อนที่สุดสำหรับอินเทอร์เฟซผู้ใช้ แอปพลิเคชันที่ใช้งานได้ต้องช่วยให้ผู้ใช้เห็น เข้าใจ และแก้ไขข้อผิดพลาดในการป้อนข้อมูล ตัวเลือกคลาสจำลอง :user-valid
และ :user-invalid
ช่วยปรับปรุงประสบการณ์ของผู้ใช้เกี่ยวกับการตรวจสอบอินพุตโดยแสดงความคิดเห็นเกี่ยวกับข้อผิดพลาดหลังจากที่ผู้ใช้เปลี่ยนอินพุตแล้วเท่านั้น เมื่อใช้ตัวเลือกใหม่เหล่านี้ คุณไม่จําเป็นต้องเขียนโค้ดที่มีสถานะเพื่อติดตามอินพุตที่ผู้ใช้เปลี่ยนแปลงอีกต่อไป
ตัวเลือกคลาสจำลองการโต้ตอบของผู้ใช้
ตัวเลือกคลาสจำลอง :user-valid
และ :user-invalid
คล้ายกับคลาสจำลอง :valid
และ :invalid
ที่มีอยู่ ทั้ง 2 รายการจะจับคู่กับตัวควบคุมแบบฟอร์มโดยพิจารณาว่าค่าปัจจุบันเป็นไปตามข้อจำกัดการตรวจสอบหรือไม่ อย่างไรก็ตาม ข้อดีของคลาสจำลอง :user-valid
และ :user-invalid
ใหม่คือจะจับคู่กับตัวควบคุมแบบฟอร์มหลังจากที่ผู้ใช้โต้ตอบกับอินพุตอย่างมีนัยสําคัญเท่านั้น
การควบคุมแบบฟอร์มที่ต้องกรอกและว่างเปล่าจะตรงกับ :invalid
แม้ว่าผู้ใช้จะยังไม่ได้เริ่มโต้ตอบกับหน้าเว็บก็ตาม อย่างไรก็ตาม ตัวควบคุมแบบฟอร์มเดียวกันจะไม่ตรงกับ :user-invalid
จนกว่าผู้ใช้จะเปลี่ยนอินพุตและปล่อยไว้ในสถานะไม่ถูกต้อง
ใช้คลาสจำลอง :user-valid
และ :user-invalid
ใช้คำนำหน้าเหล่านี้เพื่อจัดรูปแบบตัวควบคุม input, select และ textarea ดังที่แสดงในตัวอย่างต่อไปนี้
input:user-valid,
select:user-valid,
textarea:user-valid {
border-color: green;
}
input:user-invalid,
select:user-invalid,
textarea:user-invalid {
border-color: red;
}
<input required="required" />
<select required="required">
<option value="">Choose an option</option>
<option value="1">One</option>
</select>
<textarea required="required"></textarea>
ตัวเลือกจะจับคู่ตามการโต้ตอบของผู้ใช้และข้อจำกัดการตรวจสอบ ลองใช้การสาธิตต่อไปนี้เพื่อดูวิธีการทำงาน
ประสบการณ์ของผู้ใช้ที่ดีขึ้นด้วยโค้ดที่น้อยลง
หากไม่มีคลาสจำลองเหล่านี้ ผู้ใช้จะไม่ได้รับประสบการณ์การใช้งานที่ :user-valid
และ :user-invalid
มอบให้ และต้องเขียนโค้ดที่มีสถานะเพิ่มเติม โค้ดดังกล่าวจําเป็นต่อการติดตามค่าเริ่มต้น สถานะโฟกัสปัจจุบันของอินพุต ขอบเขตการเปลี่ยนแปลงค่าของผู้ใช้ เรียกใช้การตรวจสอบความถูกต้องเพิ่มเติม และสุดท้ายให้เพิ่มคลาสเพื่อเลือกการจัดรูปแบบ ตอนนี้คุณไว้วางใจให้เบราว์เซอร์จัดการเรื่องนี้ทั้งหมดโดยอัตโนมัติได้แล้ว
แหล่งข้อมูลเพิ่มเติม
- :user-valid - MDN web docs
- :user-invalid - MDN web docs
- คลาสจำลองการโต้ตอบของผู้ใช้ - ฉบับร่างสำหรับบรรณาธิการ W3C
- การตรวจสอบข้อจำกัดของแบบฟอร์ม - MDN Web Docs
- บทแนะนำการช่วยเหลือพิเศษในฟอร์ม - Web Accessibility Initiative
รูปภาพปกโดย Behzad Ghaffarian จาก Unsplash