Tutorial Membuat Show Hide Password dengan JQuery – Pada artikel kali ini saya akan membagikan tutorial jquery tentang membuat show hide password. Mungkin ada yang belum tahu apa itu show/hide password? Show hide password adalah fitur untuk memunculkan karakter yang di ketik pada form password. kan biasanya pada form password password, karakter yang tampil berupa bintang atau titik-titik yang tebal. jadi di sini kita akan mencoba membuat show hide karakter nya. di mana pada saat di klik pada show password maka karakter yang di ketik pada form password akan di tampilkan.
Oke kita langsung saja.
Tutorial Membuat Show Hide Password dengan JQuery
Yang kita butuhkan di tutorial ini adalah :
- file html/php
- jquery.js
- style.css
Dimana pada file html/php tersebut kita akan membuat formnya sedang untuk style.css kita akan menambahkan script agar tampilan form passwordnya lebih menarik. Dan hal yang paling kita butuhkan disini adalah library JQuery. Untuk mendownload library jquery silahkan klik link berikut ini. Download JQuery
Lalu buatlah file php dengan nama index.html. Lalu masukkan kode dibawah ini pada file index.html tersebut.
<!DOCTYPE html>
<html>
<head>
<title>Show Hide Form Password Dengan JQuery | www.tutorialpedia.net</title>
<script type="text/javascript" src="jquery.js"></script>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<h1>Show Hide Form Password Dengan JQuery <br/> www.tutorialpedia.net</h1>
<div class="kotak">
<form>
<input class="form-password" type="password">
<br/>
<br/>
<input type="checkbox" class="form-checkbox"> Show password
<br/>
<br/>
<input class="form-submit" type="submit" value="Login">
</form>
</div>
</body>
<script type="text/javascript">
$(document).ready(function(){
$('.form-checkbox').click(function(){
if($(this).is(':checked')){
$('.form-password').attr('type','text');
}else{
$('.form-password').attr('type','password');
}
});
});
</script>
</html>fungsi jquery yang kita buat untuk bisa menampilkan dan menyembunyikan form password. di sini yang harus kita lakukan pertama kali adalah dengan cara mendeteksi checkbox. apakah checkbox dalam keadaan aktif(di content) atau dalam kondisi non aktif. cara mengeceknya mudah teman-teman. pertama kita berikan event klik dulu pada checkbox.
$('.form-checkbox').click(function(){Lalu, kita check dahulu apakah checkbox tersebut dalam keadaan aktif atau tidak.
if($(this).is(':checked')){
$('.form-password').attr('type','text');
}else{
$('.form-password').attr('type','password');
}Untuk mengecek checkbox aktif dengan
if($(this).is(':checked')){Lalu tambahkan kode berikut pada file style.css untuk mempercantik tampilan anda.
@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,300);
body{
font-family: 'Open Sans', sans-serif;
background: #f2f5f7;
}
h1{
font-weight: 400;
text-align: center;
color: #2D3E50;
}
.kotak{
background: #1BBC9D;
width: 500px;
padding:60px 40px;
color: #fff;
margin:10px auto;
box-shadow: 2px 2px 4px 0 #ccc;
}
.form-password{
width: 93%;
padding: 10px 15px;
font-size: 14pt;
border: none;
color: #2D3E50;
}
.form-submit{
padding: 10px 15px;
background: transparent;
border: 2px solid #fff;
color: #fff;
font-size: 12pt;
}Sekarang coba jalankan file index.html
