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.
Bagaimana cara Anda hanya menampilkan elemen <input>
yang relevan?
Anda dapat menggunakan JavaScript untuk menampilkan <input>
hanya jika <input type="radio">
terkait sedang dipilih.
if (event.target.checked) {
// show additional field
} else {
// hide additional field
}
Mari kita lihat
Kode JavaScript untuk demo.
Apakah Anda sudah memperhatikan atribut aria-controls
dan aria-expanded
?
Gunakan ini
Atribut ARIA
untuk membantu pengguna pembaca layar memahami saat kontrol formulir tambahan ditampilkan atau disembunyikan.
Memastikan pengguna dapat mengirimkan formulir tanpa keluar dari halaman
Bayangkan Anda memiliki formulir komentar. Saat pembaca menambahkan komentar dan mengirimkan formulir, akan lebih baik jika 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 memperbarui isi elemen setelah perubahan.
Misalnya, perbarui teks menjadi 'Komentar Anda berhasil diposting' setelah pengguna mengirimkan komentar.
Pelajari lebih lanjut ARIA live region.
Validasi dengan JavaScript
Pastikan pesan error sesuai dengan gaya dan nuansa situs Anda
Susunan kata-kata pesan error default berbeda di setiap browser.
Bagaimana cara memastikan pesan yang sama
ditampilkan kepada semua pengguna,
serta bahwa pesannya sejajar dengan gaya dan nuansa situs Anda?
Menggunakan setCustomValidity()
dari Constraint Validation API
untuk mendefinisikan pesan {i>error<i}.
Memastikan pengguna diberi tahu tentang error secara real time
Fitur HTML bawaan untuk validasi formulir sangat bagus untuk memberi tahu pengguna tentang kolom formulir yang tidak valid sebelum data dikirim ke backend. Bukankah bagus untuk memberi tahu pengguna segera setelah mereka meninggalkan kolom formulir?
Dengarkan
blur
yang dipicu saat elemen kehilangan fokus, dan menggunakan
Antarmuka ValidityState
untuk mendeteksi apakah kontrol formulir tidak valid.
Memastikan pengguna dapat melihat sandi yang mereka masukkan
Teks yang dimasukkan untuk <input type="password">
disamarkan secara default,
untuk menghormati privasi pengguna.
Bantu pengguna memasukkan sandi, dengan menampilkan <button>
untuk mengalihkan visibilitas teks yang dimasukkan.
Coba demonya. Aktifkan/nonaktifkan
visibilitas teks yang dimasukkan, dengan menggunakan Tampilkan Sandi <button>
.
Bagaimana cara kerjanya? Dengan mengklik Tampilkan Sandi,
mengubah atribut type
dari kolom sandi dari type="password"
menjadi type="text"
,
dan teks <button>
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,
menggunakan elemen tersembunyi dengan aria-live="polite"
, dan mengubah teksnya sesuai dengan itu.
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.