Logo
Hide & Show Password

Cara Membuat Fitur Show/Hide Password pada Form Register dengan JavaScript & Bootstrap 5

  • Coding
  • Alfin Ardiansyah
  • 26 Aug 2024

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!