JavaScript

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.

Resource

• FormData
• Constraint Validation API
• <input type="password">