JavaScript

ตอบสนองต่อเหตุการณ์ในแบบฟอร์ม

คุณสามารถใช้ 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 โดยใช้ Fetch API

Browser Support

  • Chrome: 42.
  • Edge: 14.
  • Firefox: 39.
  • Safari: 10.1.

Source

สคริปต์แบ็กเอนด์สามารถตรวจสอบว่าคําขอ 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>

ดูข้อมูลเพิ่มเติมเกี่ยวกับการใช้ตัวเลือกแสดงรหัสผ่าน

แหล่งข้อมูล