Merespons peristiwa formulir
Anda dapat menggunakan JavaScript untuk merespons interaksi pengguna di formulir, menampilkan kolom formulir tambahan, mengirimkan formulir, dan banyak lagi.
Membantu pengguna mengisi kontrol formulir tambahan
Bayangkan Anda membuat formulir survei. Setelah pengguna memilih satu opsi,
Anda ingin menampilkan <input>
tambahan untuk mengajukan pertanyaan tertentu yang terkait dengan pilihan tersebut.
Bagaimana cara menampilkan elemen <input>
yang relevan saja?
Anda dapat menggunakan JavaScript untuk menampilkan <input>
hanya jika <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 melihat atribut aria-controls
dan aria-expanded
?
Gunakan
atribut ARIA
ini untuk membantu pengguna pembaca layar memahami kapan 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 mencapai hal ini, dengarkan 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
dari 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 area aktif ARIA lebih lanjut.
Validasi dengan JavaScript
Pastikan pesan error selaras dengan gaya dan nuansa situs Anda
Kata-kata pesan error default berbeda-beda di antara browser.
Bagaimana cara memastikan pesan yang sama ditampilkan kepada semua pengguna,
dan pesan tersebut sesuai dengan gaya dan nuansa situs Anda?
Gunakan metode setCustomValidity()
dari Constraint Validation API
untuk menentukan pesan error Anda sendiri.
Memastikan 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 akan lebih baik jika pengguna diberi tahu 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.
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 mereka, dengan menampilkan <button>
untuk mengalihkan visibilitas teks yang dimasukkan.
Coba demonya. Alihkan visibilitas teks yang dimasukkan, dengan menggunakan Tampilkan Sandi <button>
.
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'.
Penting untuk membuat 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 kapan sandi ditampilkan dan terlihat oleh orang lain yang melihat layar mereka.
<span class="visually-hidden" aria-live="polite">
<!-- Dynamically change this text with JavaScript -->
</span>
Pelajari lebih lanjut cara menerapkan opsi tampilkan sandi.