Cara Membuat Show atau Hide Password

Hallo sahabat Dumetschool berjumpa lagi,semoga dalam keadaan sehat dan selalu semangat. Pada kesempatan kali ini saya akan membahas tentang cara membuat show atau hide password. Saat kita mengisi suatu form pendaftaran tentu akan ada form input untuk memasukan password untuk login, pasti form tersebut ada suatu fungsi untuk melihat password yang sudah kita masukan.Baiklah mari kita buat saja form input password nya seperti berikut ini :

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Show Hide password</title>
	
</head>
<body>
	<div class="container">
		<div class="pd-row">
			<div class="pd-col-md-4 pd-offset-md-4">
				<div class="pd-field">
					<label for="">Your New Password</label>
					<div class="pd-input-group" id="password1">
						<input type="password" class="pd-input" />
						<div class="pd-input-group-prepend">
							<button class="pd-input-group-item pd-button pd-button-primary">
								<i class="pd-icon">visibility</i>
							</button>
						</div>
					</div>
				</div>
				<div class="pd-field">
					<label for="">Confrim New Password</label>
					<div class="pd-input-group" id="password2">
						<input type="password" class="pd-input" />
						<div class="pd-input-group-prepend">
							<button class="pd-input-group-item pd-button pd-button-primary">
								<i class="pd-icon">visibility</i>
							</button>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>

	
</body>
</html>

nah script diatas yang sudah kita buat adalah struktur HTML nya, saya juga akan menggunakan sebuah library yang dipakai untuk pembuatan form input password ini, jadi sahabat bisa klik link download disini .

Jika sudah di download maka copy saja dalam satu folder projek yang dibuat. Langkah selanjutnya ketikan script di bawah ini :

<!-- link CSS yang dipakai -->
	<link rel="stylesheet" href="pidie/pidie-0.0.8.css">
	<!-- link javascript yang dipakai -->
	<script src="pidie/pidie-0.0.8.js"></script>

Dan jangan lupa ketikan script untuk javascriptnya seperti berikut :

<script>
		var pidie = new Pidie();
		pidie.togglePassword('#password1');
		pidie.togglePassword('#password2')
	</script>

fungsi script diatas dimana saat icon yang berada pada element HTML <i class=”pd-icon”>visibility</i> di klik maka apa yang sudah dimasukan pada form input bisa terlihat, dan hasil tampilan yang kita buat seperti dibawah ini.

Demikian artikel tentang cara membuat show atau hide password, semoga bermanfaat dan selamat mencoba ,sampai jumpa di kempatan lainnya.

terima kasih.

Kategori