Fitur “show/hide password” adalah elemen kecil yang sangat berguna untuk meningkatkan user experience pada sebuah form login atau registrasi. Fitur ini memungkinkan pengguna untuk melihat karakter yang mereka ketikkan di kolom password, sehingga mengurangi kesalahan pengetikan.
Secara umum, kita akan menggabungkan tiga teknologi dasar web: HTML untuk strukturnya, CSS untuk tampilannya, dan JavaScript untuk interaksinya.
1. Struktur Dasar HTML
Langkah pertama adalah membuat struktur dasar form. Kita akan menggunakan elemen <input> dengan type="password" dan menambahkan sebuah tombol atau ikon di sebelahnya. Tombol ini yang nantinya akan kita gunakan untuk memicu fungsi show/hide.
<div class="password-container">
<input type="password" id="password" placeholder="Masukkan password">
<span class="toggle-password" onclick="togglePassword()">
👁️
</span>
</div>
class="password-container": Wadah utama untuk mengelompokkan input dan ikon.<input type="password">: Ini adalah input standar untuk password yang akan menyembunyikan karakter yang diketik.class="toggle-password": Ini adalah elemen yang akan kita gunakan sebagai tombol. Di sini, kita menggunakan emoji mata (👁️) sebagai ikon sederhana.onclick="togglePassword()": Ini adalah event yang akan memanggil fungsi JavaScripttogglePassword()saat tombol diklik.
2. Styling dengan CSS
Agar tampilan input dan ikon terlihat rapi, kita perlu menambahkan sedikit CSS. Kita akan menggunakan CSS untuk mengatur posisi ikon dan membuatnya terlihat seperti bagian dari input.
.password-container {
position: relative;
width: 300px;
}
#password {
width: 100%;
padding: 10px;
padding-right: 40px; /* Memberikan ruang untuk ikon */
box-sizing: border-box;
}
.toggle-password {
position: absolute;
right: 10px;
top: 50%;
transform: translateY(-50%);
cursor: pointer;
}
position: relative;pada.password-containersangat penting. Ini memungkinkan kita untuk memosisikan ikon secara absolut di dalamnya.padding-rightpada#passwordmemastikan teks tidak tertutup oleh ikon.position: absolute;pada.toggle-passwordmemposisikan ikon secara bebas di dalam.password-container.top: 50%;dantransform: translateY(-50%);adalah trik umum untuk menempatkan elemen secara vertikal di tengah.
3. Interaksi dengan JavaScript
Bagian ini adalah inti dari fitur show/hide. Kita akan membuat fungsi JavaScript yang mengubah atribut type dari input password.
function togglePassword() {
const passwordInput = document.getElementById('password');
const toggleIcon = document.querySelector('.toggle-password');
// Cek tipe input saat ini
if (passwordInput.type === 'password') {
// Jika password, ubah menjadi teks
passwordInput.type = 'text';
toggleIcon.textContent = '🙈'; // Ubah ikon menjadi mata tertutup
} else {
// Jika teks, kembalikan menjadi password
passwordInput.type = 'password';
toggleIcon.textContent = '👁️'; // Ubah ikon kembali
}
}
document.getElementById('password'): Digunakan untuk mendapatkan elemen input password.document.querySelector('.toggle-password'): Digunakan untuk mendapatkan elemen ikon.passwordInput.type === 'password': Kondisi ini memeriksa apakah tipe input saat ini adalahpassword.passwordInput.type = 'text': Ini adalah baris kode kunci yang mengubah karakter tersembunyi menjadi teks biasa.passwordInput.type = 'password': Ini mengembalikan tipe input menjadipassworduntuk menyembunyikan teks.- Kita juga mengubah ikon (
textContent) untuk memberikan umpan balik visual kepada pengguna.
4. Menggabungkan Semuanya
Untuk melihat hasilnya, kamu bisa menempatkan semua kode di atas ke dalam satu file HTML. Simpan sebagai index.html dan buka di browser.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Show/Hide Password</title>
<style>
.password-container {
position: relative;
width: 300px;
margin: 50px auto;
}
#password {
width: 100%;
padding: 10px;
padding-right: 40px;
box-sizing: border-box;
}
.toggle-password {
position: absolute;
right: 10px;
top: 50%;
transform: translateY(-50%);
cursor: pointer;
}
</style>
</head>
<body>
<div class="password-container">
<input type="password" id="password" placeholder="Masukkan password">
<span class="toggle-password" onclick="togglePassword()">
👁️
</span>
</div>
<script>
function togglePassword() {
const passwordInput = document.getElementById('password');
const toggleIcon = document.querySelector('.toggle-password');
if (passwordInput.type === 'password') {
passwordInput.type = 'text';
toggleIcon.textContent = '🙈';
} else {
passwordInput.type = 'password';
toggleIcon.textContent = '👁️';
}
}
</script>
</body>
</html>
Dengan mengikuti langkah-langkah ini, kamu telah berhasil membuat fitur show/hide password yang interaktif dan user-friendly! 🚀
