Pada tutorial kali ini kita akan membuat show hide password dengan menggunakan HTML, CSS dan Javascript. Kenapa kita perlu membuat show dan hide password? karna fitur ini akan sangat membantu user dalam proses penginputan data password user. kalau tanpa adanya button show hide password pada saat user terjadi kesalahan, si user tidak dapat melihat benar atau salahnya password yang di inputkan.
Biar tidak berlama-lama kita langsung saja, silahkan ikuti kode dibawahnya.
Struktur Folder:
 |
1. Silahkan buat file index.html, dan salin kode dibwah ini.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Show hide password</title>
</head>
<body>
<div class="content">
<div class="pass-lock">
<div class="fa fa-lock"></div>
</div>
<input type="password" placeholder="Enter Password" required>
<span class="show-hide">
<i class="fa fa-eye"></i>
</span>
</div>
</body>
</html>
 |
| Hasil dari kode di atas menghasilkan Input Password. |
Setelah selesai menyalin kode di atas, tambahkan kode dibawah dibagian <head>....</head> pada file html.
<script src="jquery.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">Untuk file jquey silahkan download : file jquery
2. Selanjutnya kita membuat file css dengan nama style.css untuk mempercantik Input Password kita. Silahkan salin kode dibawah ini.
body {
display: flex;
height: 100vh;
align-items: center;
justify-content: center;
text-align: center;
background-color: #efe7bc;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.content {
height: 50px;
width: 280px;
display: flex;
position: relative;
}
.content .pass-lock {
position: absolute;
height: 50px;
width: 50px;
background: #41729f;
color: #fff;
line-height: 48px;
font-size: 20px;
border-radius: 3px 0 0 3px;
border: 1px solid #41729f;
}
.content input {
height: 100%;
width: 100%;
border-radius: 3px;
border: 1px solid #41729f;
padding-left: 60px;
font-size: 16px;
outline: none;
color: #000000;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}
input:focus {
box-shadow: 0 0 15px #89b2d8, 0 0 25px #aecce7, 0 0 35px #ffffff;
}
input::placeholder {
color: #a6a6a6;
}
.show-hide {
position: absolute;
right: 15px;
top: 50%;
transform: translateY(-50%);
}
.show-hide i {
font-size: 19px;
color: #3e0d0d;
cursor: pointer;
display: none;
}
.show-hide i.hide::before {
content: "\f070";
}
input:valid~.show-hide i {
display: block;
}
<link rel="stylesheet" href="style.css">
Akan muncul hasil seperti gambar di bawah.
Agar fungsi show dan hide nya jalan, kita akan tambahkan kode dibawah ini di bagian atas </body>, disini kita menggunakan javascript.
<script>
const password = document.querySelector("input");
const btn_show = document.querySelector("i");
btn_show.addEventListener("click", function(){
if(password.type === "password") {
password.type = "text";
btn_show.classList.add("hide");
} else {
password.type = "password";
btn_show.classList.remove("hide");
}
})
</script>
Setelah semuanya selesai, coba jalankan di browser anda, akan muncul seperti gambar dibawah ini, sebegai contoh kami tampilkan 2 contoh dalam 1 gambar, agar terlihat lebih jelas:
Terimakasih semoga bermanfaat:
Untuk lebih jelas dan lengkapnya, silahkan lihat pada link video dibawah ini:
Post a Comment