Merespons peristiwa formulir
Anda dapat menggunakan JavaScript untuk merespons interaksi pengguna di formulir, menampilkan kolom formulir tambahan, mengirimkan formulir, dan banyak lagi.
Bantu pengguna mengisi kontrol formulir tambahan
Bayangkan Anda membuat formulir survei. Setelah pengguna memilih satu opsi,
Anda ingin menampilkan <input> tambahan untuk mengajukan pertanyaan tertentu terkait pilihan tersebut.
Bagaimana cara agar hanya menampilkan elemen <input> yang relevan?
Anda dapat menggunakan JavaScript untuk menampilkan <input> hanya ketika <input type="radio"> terkait saat ini dipilih.
if (event.target.checked) {
// show additional field
} else {
// hide additional field
}
Mari kita lihat
kode JavaScript untuk demo.
Apakah Anda telah memperhatikan atribut aria-controls dan aria-expanded?
Gunakan
atribut ARIA
ini untuk membantu pengguna pembaca layar memahami kapan kontrol formulir tambahan ditampilkan atau disembunyikan.
Pastikan pengguna dapat mengirimkan formulir tanpa meninggalkan halaman
Bayangkan Anda memiliki formulir komentar. Saat pembaca menambahkan komentar dan mengirimkan formulir, sebaiknya mereka dapat langsung melihat komentar tanpa memuat ulang halaman.
Untuk mencapainya, proses peristiwa onsubmit, lalu gunakan event.preventDefault() untuk mencegah perilaku default, dan kirim FormData menggunakan Fetch API.
Skrip backend Anda dapat memeriksa apakah permintaan POST tampaknya berasal dari browser
(menggunakan atribut action elemen formulir, dengan method="post") atau dari JavaScript,
seperti permintaan fetch().
if (req.xhr || req.headers.accept.indexOf('json') !== -1) {
// return JSON
} else {
// return HTML
}
Selalu beri tahu pengguna pembaca layar tentang perubahan konten dinamis.
Tambahkan elemen dengan atribut aria-live="polite" ke HTML Anda,
dan perbarui konten elemen setelah perubahan.
Misalnya, perbarui teks menjadi 'Komentar Anda berhasil diposting', setelah pengguna mengirimkan komentar.
Pelajari region live AAR lebih lanjut.
Validasi dengan JavaScript
Memastikan pesan error selaras dengan gaya dan nuansa situs Anda
Kata-kata pada pesan error default berbeda-beda di setiap browser.
Bagaimana cara memastikan pesan yang sama ditampilkan kepada semua pengguna,
dan bahwa pesan tersebut selaras dengan gaya dan nuansa situs Anda?
Gunakan metode setCustomValidity()
dari Constraint Validation API
untuk menentukan pesan error Anda sendiri.
Pastikan pengguna diberi tahu tentang error secara real time
Fitur HTML bawaan untuk validasi formulir sangat cocok untuk memberi tahu pengguna tentang kolom formulir yang tidak valid sebelum data dikirim ke backend Anda. Bukankah bagus untuk memberi tahu pengguna segera setelah mereka meninggalkan kolom formulir?
Proses
peristiwa blur
yang diaktifkan saat elemen kehilangan fokus, dan gunakan
antarmuka ValidityState untuk mendeteksi apakah kontrol formulir tidak valid.
Pastikan pengguna dapat melihat sandi yang mereka masukkan
Teks yang dimasukkan untuk <input type="password"> dikaburkan secara default,
untuk menghormati privasi pengguna.
Bantu pengguna memasukkan sandi, dengan menampilkan <button> untuk mengalihkan visibilitas teks yang dimasukkan.
Coba demonya. Alihkan
visibilitas teks yang dimasukkan, dengan menggunakan <button> Show Password.
Bagaimana cara kerjanya? Mengklik Tampilkan Sandi,
akan mengubah atribut type kolom sandi dari type="password" menjadi type="text",
dan teks <button> akan berubah menjadi 'Sembunyikan Sandi'.
Pastikan tombol Tampilkan Sandi dapat diakses.
Hubungkan <button> dengan <input type="password"> menggunakan atribut aria-controls.
Untuk memberi tahu pengguna pembaca layar jika sandi saat ini ditampilkan atau disembunyikan,
gunakan elemen tersembunyi dengan aria-live="polite", dan ubah teksnya sebagaimana mestinya.
Penting untuk memungkinkan pengguna pembaca layar mengetahui saat sandi ditampilkan dan dapat dilihat oleh orang lain yang melihat layarnya.
<span class="visually-hidden" aria-live="polite">
<!-- Dynamically change this text with JavaScript -->
</span>
Pelajari lebih lanjut cara menerapkan opsi tampilkan sandi.