ตอบกลับเหตุการณ์ในแบบฟอร์ม
คุณสามารถใช้ JavaScript เพื่อตอบกลับการโต้ตอบของผู้ใช้ในแบบฟอร์ม แสดงช่องเพิ่มเติมของแบบฟอร์ม ส่งแบบฟอร์ม และอื่นๆ อีกมากมาย
ช่วยให้ผู้ใช้กรอกข้อมูลในตัวควบคุมแบบฟอร์มเพิ่มเติม
สมมติว่าคุณสร้างแบบฟอร์มแบบสำรวจ หลังจากที่ผู้ใช้เลือกตัวเลือกหนึ่งแล้ว คุณต้องการแสดง <input>
เพิ่มเติมเพื่อถามคำถามเฉพาะที่เกี่ยวข้องกับรายการที่เลือก
คุณจะแสดงเฉพาะองค์ประกอบ <input>
ที่เกี่ยวข้องได้อย่างไร
คุณจะใช้ JavaScript เพื่อแสดง <input>
ได้ก็ต่อเมื่อเลือก <input type="radio">
ที่เชื่อมโยงไว้เท่านั้น
if (event.target.checked) {
// show additional field
} else {
// hide additional field
}
มาดูโค้ด JavaScript ของการสาธิตกัน
คุณสังเกตเห็นแอตทริบิวต์ aria-controls
และ aria-expanded
ไหม
ใช้แอตทริบิวต์ ARIA เหล่านี้เพื่อช่วยให้ผู้ใช้โปรแกรมอ่านหน้าจอเข้าใจว่าเมื่อใดที่มีการแสดงหรือซ่อนตัวควบคุมแบบฟอร์มเพิ่มเติม
ตรวจสอบว่าผู้ใช้ส่งแบบฟอร์มได้โดยไม่ต้องออกจากหน้า
ลองนึกภาพว่าคุณมีฟอร์มความคิดเห็น เมื่อผู้อ่านเพิ่มความคิดเห็นและส่งแบบฟอร์ม ผู้อ่านจะเห็นความคิดเห็นทันทีโดยไม่ต้องรีเฟรชหน้า
หากต้องการทำเช่นนี้ ให้ฟังเหตุการณ์ onsubmit
แล้วใช้ event.preventDefault()
เพื่อป้องกันการทำงานเริ่มต้น
และส่ง FormData
โดยใช้ API การดึงข้อมูล
สคริปต์แบ็กเอนด์จะตรวจสอบได้ว่าคําขอ POST
มาจากเบราว์เซอร์ (โดยใช้แอตทริบิวต์ action
ขององค์ประกอบแบบฟอร์มที่ method="post"
) หรือจาก JavaScript เช่น คําขอ fetch()
if (req.xhr || req.headers.accept.indexOf('json') !== -1) {
// return JSON
} else {
// return HTML
}
แจ้งผู้ใช้โปรแกรมอ่านหน้าจอทุกครั้งเกี่ยวกับการเปลี่ยนแปลงเนื้อหาแบบไดนามิก
เพิ่มองค์ประกอบที่มีแอตทริบิวต์ aria-live="polite"
ลงใน HTML
และอัปเดตเนื้อหาขององค์ประกอบหลังการเปลี่ยนแปลง
เช่น อัปเดตข้อความเป็น "โพสต์ความคิดเห็นของคุณเรียบร้อยแล้ว" หลังจากที่ผู้ใช้ส่งความคิดเห็นแล้ว
ดูข้อมูลเพิ่มเติมเกี่ยวกับภูมิภาคแบบสดของ ARIA
การตรวจสอบความถูกต้องด้วย JavaScript
ตรวจสอบว่าข้อความแสดงข้อผิดพลาดสอดคล้องกับรูปแบบและลักษณะทั่วไปของเว็บไซต์
การใช้คำของข้อความแสดงข้อผิดพลาดเริ่มต้นจะแตกต่างกันไปในแต่ละเบราว์เซอร์
คุณจะแน่ใจได้อย่างไรว่าข้อความเดียวกันจะแสดงต่อผู้ใช้ทุกคน
และเพื่อให้ข้อความสอดคล้องกับรูปแบบและน้ำเสียงของเว็บไซต์
ใช้เมธอด setCustomValidity()
ของ Constraint Validation API เพื่อกำหนดข้อความแสดงข้อผิดพลาดของคุณเอง
ตรวจสอบว่าผู้ใช้ได้รับการแจ้งเตือนเกี่ยวกับข้อผิดพลาดแบบเรียลไทม์
ฟีเจอร์ HTML ในตัวสำหรับการตรวจสอบความถูกต้องของแบบฟอร์มนั้นเหมาะอย่างยิ่งสำหรับการแจ้งให้ผู้ใช้ทราบเกี่ยวกับช่องแบบฟอร์มที่ไม่ถูกต้องก่อนที่จะส่งข้อมูลไปยังแบ็กเอนด์ของคุณ คงจะดีไม่น้อยหากควรแจ้งให้ผู้ใช้ทราบทันทีที่ออกจากช่องแบบฟอร์ม
ฟังเหตุการณ์ blur
ที่เริ่มทำงานเมื่อองค์ประกอบหลุดโฟกัส และใช้อินเทอร์เฟซ ValidityState
เพื่อตรวจหาว่าตัวควบคุมแบบฟอร์มไม่ถูกต้องหรือไม่
ตรวจสอบว่าผู้ใช้เห็นรหัสผ่านที่ป้อน
ข้อความที่ป้อนสำหรับ <input type="password">
จะถูกปิดบังโดยค่าเริ่มต้น เพื่อเคารพความเป็นส่วนตัวของผู้ใช้
ช่วยให้ผู้ใช้ป้อนรหัสผ่านด้วยการแสดง <button>
เพื่อสลับระดับการเข้าถึงข้อความที่ป้อน
ลองใช้เดโม สลับการแสดงข้อความที่ป้อนโดยใช้แสดงรหัสผ่าน <button>
คุณลักษณะนี้ทำงานอย่างไร เมื่อคลิกแสดงรหัสผ่าน
จะเปลี่ยนแอตทริบิวต์ type
ของช่องรหัสผ่านจาก type="password"
เป็น type="text"
และ <button>
ข้อความจะเปลี่ยนเป็น "ซ่อนรหัสผ่าน"
คุณควรทำให้ปุ่มแสดงรหัสผ่านเข้าถึงได้
เชื่อมต่อ <button>
กับ <input type="password">
โดยใช้แอตทริบิวต์ aria-controls
หากต้องการแจ้งผู้ใช้โปรแกรมอ่านหน้าจอหากมีการแสดงหรือซ่อนรหัสผ่านอยู่ในขณะนี้ ให้ใช้องค์ประกอบที่ซ่อนไว้ด้วย aria-live="polite"
และเปลี่ยนข้อความให้สอดคล้องกัน
คุณต้องช่วยให้ผู้ใช้โปรแกรมอ่านหน้าจอรู้เมื่อมีการแสดงรหัสผ่านและผู้อื่นที่กำลังดูหน้าจอของตนอยู่
<span class="visually-hidden" aria-live="polite">
<!-- Dynamically change this text with JavaScript -->
</span>
ดูข้อมูลเพิ่มเติมเกี่ยวกับการใช้งานตัวเลือกแสดงรหัสผ่าน