JQuery

Show Hide Form Password Dengan JQuery

By Diki Alfarabi Hadi
25 March 2016
JQuery

Show Hide Form Password Dengan JQuery

Show Hide Form Password Dengan JQuery – Mungkin teman-teman ada yang masih bingung dengan judul tutorial kali ini, yaitu Show Hide Form Password Dengan JQuery. jangan bingung tema-teman. akan saya jelaskan sedikit yang di maksud dengan 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.

Show Hide Form Password Dengan JQuery

Bingung ? lihat contohnya pada gambar di bawah ini.

show hide form password dengan jquery

tampil dan sembunyikan password

Cara Menampilkan dan Menyembunyikan Password Dengan JQuery

Oke langsung saja teman-teman silahkan di perhatikan penjelasan untuk membuat show hide password berikut ini.

Yang kita butuhkan di tutorial ini adalah :

file html/php
jquery.js
style.css

pada file html atau php nya kita akan buatkan form nya. dan pada style.css kita akan mempercantik tampilan form password kita. agar lebih enak di pandang ya. hehe

dan yang terpenting di sini kita membutuhkan library jquery.js. silahkan teman-teman download dari situs resmi jquery. http://jquery.com

kemudian buatkan sebuah file ntah itu html atau php. di sini saya membuat file dengan nama index.html. karena pada file ini lah kita akan membuat form password serta checkbox nya. untuk menampilkan dan menyembunyikan password nya.

index.html

<!DOCTYPE html>
<html>
<head>
	<title>Show Hide Form Password Dengan JQuery | www.malasngoding.com</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.malasngoding.com</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>

<!DOCTYPE html>

<html>

<head>

<title>Show Hide Form Password Dengan JQuery | www.malasngoding.com</title>

</head>

<body>

<h1>Show Hide Form Password Dengan JQuery <br/> www.malasngoding.com</h1>

<form>

<br/>

<input type="checkbox" class="form-checkbox"> Show password

<br/>

</form>

</div>

</body>

$(document).ready(function(){

$('.form-checkbox').click(function(){

if($(this).is(':checked')){

$('.form-password').attr('type','text');

}else{

$('.form-password').attr('type','password');

}

});

</script>

</html>

baik saya jelaskan di sini tentang 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(){

1	$('.form-checkbox').click(function(){

teman-teman bisa membaca tutorial saya sebelumnya yang telah kita bahas tentang event pada jquery. baca tutorial event jquery. dan jika teman-teman ingin mempelajari event pada javascript teman-teman bisa baca tutorial event javascript.

kemudian kita cek apakah checkbox dalam keadan aktif atau non aktif.

if($(this).is(':checked')){
	$('.form-password').attr('type','text');
}else{
	$('.form-password').attr('type','password');
}

if($(this).is(':checked')){

$('.form-password').attr('type','text');

}else{

$('.form-password').attr('type','password');

}

kita mengecek checkbox aktif dengan

if($(this).is(':checked')){

1	if($(this).is(':checked')){

lalu kita cek, jika aktif maka atribut form password kita ganti dengan text. jika checkbox tidak aktif maka kita ganti kembali atribut form password menjadi password.

yaitu dengan cara menangkap data

style.css

@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;	
}

@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;

}

dan coba teman-teman coba sendiri pada demo nya berikut ini.

See the Pen menampilkan dan menyembunyikan password dengan jquery by Malas Ngoding (@malasngoding) on CodePen.0

Mungkin sekian saja tutorial membuat Show Hide Form Password Dengan JQuery. semoga dapat bermanfaat.

Incoming search terms:

membuat show password
hide dan unhide password di php
membuat show password di php
menampilkan password php
cara menampilkan password md5
cara membuat show password di php
Cara bikin form search ketika di ketik keliatan
membuat fasilitas show hide password form login
show hide password php
jquery passowrd show

Diki Alfarabi Hadi

Coding enthusiast. Someone who love learn something new. especially about web programming and web design. happy to share about knowledge and learn from other.