Visibilitas Kata Sandi

Bidang kata sandi menyediakan cara bagi pengguna untuk memasukkan kata sandi dengan aman dengan menampilkan karakter * alih-alih karakter yang sebenarnya.

Namun, kemungkinan beberapa pengguna akan mengetik kata sandi yang salah. Untuk membantu mereka melihat kata sandi yang saat ini mereka masukkan, Anda dapat menambahkan tombol yang memungkinkan mereka untuk mengubah visibilitas kata sandi.

Untuk membuat kata sandi terlihat, Anda mengikuti langkah-langkah berikut:

1. Pertama, buat <input> elemen dengan jenis kata sandi dan ikon yang memungkinkan pengguna mengkliknya untuk mengalihkan visibilitas kata sandi.
2. Kedua, ikat penangan peristiwa ke peristiwa klik ikon. Jika ikon diklik, alihkan atribut jenis bidang kata sandi antara teks dan kata sandi. Input dengan jenis teks akan menampilkan kata sandi yang sebenarnya.
3. Ketiga, ubah ikon agar lebih ramah pengguna. Langkah ini bersifat opsional.

Untuk membuatnya mudah, kita akan menggunakan dua ikon dari ikon Bootstrap untuk mengurangi visibilitas kata sandi.

Berikut ini menunjukkan kode HTML halaman: