Tentu, berikut adalah artikel tentang cara membuat fitur show hide password menggunakan JavaScript. Fitur ini memungkinkan pengguna untuk melihat atau menyembunyikan teks kata sandi saat mereka mengetiknya, meningkatkan pengalaman pengguna dan mengurangi kesalahan pengetikan.

Fitur show hide password adalah tambahan kecil namun signifikan yang dapat meningkatkan kegunaan formulir login atau pendaftaran. Dengan memungkinkan pengguna melihat kata sandi yang mereka ketik, risiko kesalahan pengetikan dapat diminimalkan. Berikut adalah langkah-langkah untuk mengimplementasikannya menggunakan HTML, CSS, dan JavaScript.

1. Struktur HTML

Pertama, kita akan membuat struktur HTML yang terdiri dari input kata sandi dan sebuah elemen (biasanya tombol atau checkbox) yang akan digunakan untuk memicu tampilan atau penyembunyian kata sandi.

Contoh dengan Tombol:

Contoh dengan Checkbox:

Dalam kedua contoh, kita memiliki input dengan type="password" dan ID password. Untuk tombol, kita memiliki elemen <button> dengan ID togglePassword dan teks awal “Lihat”. Untuk checkbox, kita memiliki <input type="checkbox"> dengan ID togglePasswordCheckbox dan label “Lihat Kata Sandi”.

2. Styling CSS (opsional)

Anda dapat menambahkan CSS untuk menata tampilan input dan tombol/checkbox sesuai dengan desain Anda. Contoh minimal untuk tombol:

Contoh minimal untuk checkbox (mungkin tidak memerlukan banyak gaya tambahan tergantung pada preferensi):

3. Logika JavaScript (script.js)

Sekarang, kita akan menulis JavaScript untuk menangani interaksi tombol atau checkbox dan mengubah tipe input kata sandi.

JavaScript untuk Tombol:

Penjelasan JavaScript (Tombol):

• const passwordInput = document.getElementById('password');: Kita mengambil elemen input kata sandi berdasarkan ID-nya.
• const togglePasswordButton = document.getElementById('togglePassword');: Kita mengambil elemen tombol berdasarkan ID-nya.
• togglePasswordButton.addEventListener('click', function() { ... });: Kita menambahkan event listener untuk event click pada tombol.
• const type = passwordInput.getAttribute('type') === 'password' ? 'text' : 'password';: Di dalam event handler, kita memeriksa tipe input kata sandi saat ini. Jika tipenya adalah password, kita ubah menjadi text; jika tipenya text, kita ubah kembali menjadi password.
• passwordInput.setAttribute('type', type);: Kita mengatur atribut type dari input kata sandi sesuai dengan nilai variabel type.
• this.textContent = type === 'password' ? 'Lihat' : 'Sembunyikan';: Kita juga mengubah teks pada tombol sesuai dengan status kata sandi. Jika kata sandi terlihat (type adalah text), teks tombol menjadi “Sembunyikan”, dan sebaliknya.

JavaScript untuk Checkbox:

Penjelasan JavaScript (Checkbox):

• const passwordInput = document.getElementById('password');: Sama seperti sebelumnya, kita mengambil elemen input kata sandi.
• const togglePasswordCheckbox = document.getElementById('togglePasswordCheckbox');: Kita mengambil elemen checkbox berdasarkan ID-nya.
• togglePasswordCheckbox.addEventListener('change', function() { ... });: Kita menambahkan event listener untuk event change pada checkbox. Event ini dipicu ketika status checkbox berubah (dicentang atau tidak).
• passwordInput.type = this.checked ? 'text' : 'password';: Di dalam event handler, kita memeriksa apakah checkbox dicentang (this.checked). Jika dicentang, kita mengubah tipe input kata sandi menjadi text; jika tidak dicentang, kita ubah menjadi password. Perhatikan bahwa kita langsung mengatur properti type di sini.

Menggabungkan Semuanya

Pastikan Anda telah membuat tiga file (index.html, style.css, dan script.js) dan menempatkannya dalam direktori yang sama. Saat Anda membuka index.html di peramban, Anda akan melihat formulir dengan fitur show hide password yang berfungsi.

Kesimpulan

Menambahkan fitur show hide password ke formulir Anda adalah cara sederhana untuk meningkatkan pengalaman pengguna. Dengan menggunakan sedikit HTML, CSS (opsional untuk styling), dan JavaScript, Anda dapat dengan mudah mengimplementasikan fungsionalitas ini dan membuat formulir Anda lebih ramah pengguna. Anda dapat memilih untuk menggunakan tombol atau checkbox sesuai dengan preferensi desain dan pengguna Anda.