Jika sebelumnya kita sudah membuat fitur Show/Hide Password Form Login, maka kali ini kita akan membuatnya pada Form Register. Dalam proses pendaftaran di sebuah website, form registrasi yang user-friendly sangatlah penting. Salah satu fitur yang dapat meningkatkan pengalaman pengguna adalah show/hide password. Fitur ini memungkinkan pengguna untuk melihat atau menyembunyikan kata sandi yang mereka masukkan, meminimalisir kesalahan input. Artikel ini akan membahas cara membuat fitur show/hide password pada form registrasi menggunakan JavaScript dan Bootstrap 5.
Membuat form tampilan Register :
Langkah pertama adalah membuat form registrasi dengan input untuk username, email, dan password. Berikut adalah contoh sederhana:
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Form Registrasi</title>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/bootstrap-icons/font/bootstrap-icons.css" rel="stylesheet">
</head>
<body>
<div class="container mt-5">
<h2 class="text-center">Form Registrasi</h2>
<form>
<!-- Input Username -->
<div class="mb-3">
<label for="username" class="form-label">Username</label>
<input type="text" class="form-control" id="username" placeholder="Masukkan username" required>
</div>
<!-- Input Email -->
<div class="mb-3">
<label for="email" class="form-label">Email</label>
<input type="email" class="form-control" id="email" placeholder="Masukkan email" required>
</div>
<!-- Input Password -->
<div class="mb-3">
<label for="password" class="form-label">Password</label>
<div class="input-group">
<input type="password" class="form-control" id="password" placeholder="Masukkan password" required>
<button type="button" class="btn btn-outline-secondary" id="togglePassword">
<i class="bi bi-eye-slash" id="toggleIcon"></i>
</button>
</div>
</div>
<!-- Input Konfirmasi Password -->
<div class="mb-3">
<label for="confirmPassword" class="form-label">Konfirmasi Password</label>
<div class="input-group">
<input type="password" class="form-control" id="confirmPassword" placeholder="Konfirmasi password" required>
<button type="button" class="btn btn-outline-secondary" id="toggleConfirmPassword">
<i class="bi bi-eye-slash" id="toggleConfirmIcon"></i>
</button>
</div>
</div>
<!-- Tombol Submit -->
<button type="submit" class="btn btn-primary w-100">Daftar</button>
</form>
</div>
<script src="./script.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
crossorigin="anonymous"></script>
<!-- Link ke Bootstrap JS dan Popper.js -->
<script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/
</body>
</html>
Hasil Tampilan :
Berikutnya buat file Javacriptnya script.js untuk memunculkan fungsi Hide/Show :
<script>
const togglePassword = document.querySelector('#togglePassword');
const password = document.querySelector('#password');
const toggleIcon = document.querySelector('#toggleIcon');
const toggleConfirmPassword = document.querySelector('#toggleConfirmPassword');
const confirmPassword = document.querySelector('#confirmPassword');
const toggleConfirmIcon = document.querySelector('#toggleConfirmIcon');
togglePassword.addEventListener('click', function () {
const type = password.getAttribute('type') === 'password' ? 'text' : 'password';
password.setAttribute('type', type);
toggleIcon.classList.toggle('bi-eye');
toggleIcon.classList.toggle('bi-eye-slash');
});
toggleConfirmPassword.addEventListener('click', function () {
const type = confirmPassword.getAttribute('type') === 'password' ? 'text' : 'password';
confirmPassword.setAttribute('type', type);
toggleConfirmIcon.classList.toggle('bi-eye');
toggleConfirmIcon.classList.toggle('bi-eye-slash');
});
</script>
Selamat Mencoba dan nantikan tutorial lainya di RuangBacaku!