Widget HTML #1

Beranda / CSS / HTML / JavaScript

Tutorial Lengkap: Membuat Tombol Tampilkan/Sembunyikan Password dengan Bootstrap 5.3

Posting Komentar

Halo teman-teman pada artikel kali ini saya akan membagikan kepada teman teman bagaimana cara membuat button yang berfungsi pada form password untuk menampilkan dan menyembunyikan password. saya sudah menyediakan demo untuk teman teman bisa lihat disini

Membuat File Html

Langkah pertama kita perlu membuat form menggunakan html dan disini saya menggunakan bantuan Bootstrap 5.3 untuk styling nya seperti di bawah ini

index.html :

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Hide/Show Password with Bootstrap</title>
  <!-- Bootstrap CSS -->
  <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
  <link rel="stylesheet" href="style.css">
</head>

<body>

  <div class="container center-container">
    <div class="col-md-4">
      <div class="mb-3 password-container">
        <label for="password" class="form-label">Password</label>
        <input type="password" class="form-control" id="password" placeholder="Enter your password">
        <span class="toggle-password" onclick="togglePassword()">👁️</span>
      </div>
    </div>
  </div>

  <!-- Bootstrap JS and Popper.js -->
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
  <script src="script.js"></script>
</body>

</html>

Sepereti terlihat pada kode di atas untuk menambahkan Bootstrap 5.3 kedalam projek kita, kita hanya perlu menambhkan 2 cdn untuk css dan javascript dari bootstrap nya saja dimana untuk cssnya kita taruh di dalam tag <head>

Link CSS Bootstrap 5.3 : 
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">

Script JS Bootstrap 5.3 : 
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>

Membuat File CSS

Selanjutnya meskipun kita sudah menggunakan Bootstrap untuk stylingnya, tetapi kita tetap perlu menambahkan beberapa css kostum untuk lebih mempercantik tampilan, berikut kode cssnya

style.css :

.password-container {
  position: relative;
}

.toggle-password {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  cursor: pointer;
}

/* Center the form on the page */
.center-container {
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

Membuat Fungsi Javascript

Setelah kita menambahkan css selanjutnya kita akan membuat fungsi pada javascript yang akan berfungsi untuk mengganti tipe input pada input password menjadi text dan sebaliknya

script.js :

function togglePassword() {
  const passwordInput = document.getElementById("password");
  const toggleIcon = document.querySelector(".toggle-password");

  if (passwordInput.type === "password") {
    passwordInput.type = "text";
    toggleIcon.textContent = "🙈"; // Change icon to hidden
  } else {
    passwordInput.type = "password";
    toggleIcon.textContent = "👁️"; // Change icon to show
  }
}

Kesimpulan

Untuk membuat fungsi yang akan menampilkan atau sembunyikan password kita hanya perlu membuat fungsi untuk mengganti tipe pada input dimana agar password sembunyi kita akan menggunakan tipe password sedangkan untuk menampilkan password kita perlu mengganti tipe input menjadi text

Posting Komentar untuk "Tutorial Lengkap: Membuat Tombol Tampilkan/Sembunyikan Password dengan Bootstrap 5.3"

Posting Komentar