Belajar JavaScript - Cara show hide form password dengan JavaScript, disini kita akan membuat cara sederhana untuk menampilkan atau menyembunyikan password pada form password.
Mungkin banyak dari kalian yang sering menemukan fungsi ini, misalnya ketika akan mendaftar atau masuk ke media sosial.
Baca juga: Menghitung denda peminjaman buku dengan PHP
Langsung saja, berikut baris kodenya.
<!DOCTYPE html>
<html>
<head>
<title>Cara show hide form password dengan javascript</title>
<!-- Bootstrap -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
</head>
<body>
<div class="container mt-5">
<center><h1>Cara show hide form password dengan javascript</h1></center>
<div class="form-inline col-sm-6 mx-auto mt-5">
<label for="pass">Password</label>
<input type="password" id="password" class="form-control ml-2 mr-2">
<input type="checkbox" onclick="myFunction()"> Tampilkan Password
</div>
</div>
<script>
function myFunction() {
var x = document.getElementById("password");
if (x.type === "password") {
x.type = "text";
} else {
x.type = "password";
}
}
</script>
</body>
</html>
Output:
Penjelasan:
<input type="checkbox" onclick="myFunction()">Pada baris kode diatas kita mmemanggil fungsi
myFunction() ketika checkbox diklik.<script>
function myFunction() {
let x = document.getElementById("password");
if (x.type === "password") {
x.type = "text";
} else {
x.type = "password";
}
}
</script>
Baris kode diatas merupakan fungsi dari
myFunction() yang didalamnya kita melakukan pengambilan element dengan id password yang kemudian ditampung dalam variabel x.Lalu melakukan pengecekan type inputan, apabila variabel x bertype "password" maka ketika checkbox diklik maka akan diubah menjadi bertype "text" seperti gambar output diatas.
Baca juga: Menampilkan data berdasarkan periode bulan dengan PHP
0 Komentar