Cara Membuat Show dan Hide Password

Hallo teman teman balik lagi dengan saya Ismet Maulana kali ini saya ingin berbagi pengetahuan tentang Bagaimana Cara Membuat Show Dan Hide Password.

Oke langsung saja teman teman bisa salinkan scriptnya dibawah sini :

<body>
	<div class="container">
		<form action="" method="POST">
			<table>
				<tr>
					<td>USERNAME</td>
					<td></td>
					<td><input type="text" name="username" id="user"></td>
				</tr>
				<tr>
					<td>PASSWORD</td>
					<td></td>
					<td><input type="password" name="password" id="pass"></td>
				</tr>
				<tr>
					<td></td>
					<td colspan="3">
						<input type="button" name="submit" value="SHOW PASSWORD" id="show" onclick="ShowPassword()">
						<input type="button" style="display:none" id="hide" value="Hide Password" onclick="HidePassword()">
					</td>
					
				</tr>
			</table>
		</form>
	</div>
</body>

javascript :

<script>
	function ShowPassword()
{
	if(document.getElementById("pass").value!="")
	{
		document.getElementById("pass").type="text";
		document.getElementById("show").style.display="none";
		document.getElementById("hide").style.display="block";
	}
}

function HidePassword()
{
	if(document.getElementById("pass").type == "text")
	{
		document.getElementById("pass").type="password"
		document.getElementById("show").style.display="block";
		document.getElementById("hide").style.display="none";
	}
}
</script>

dan ini CSS-nya :

<style>
	.container{width: 500px; margin: auto; border:1px solid #eee; height: 155px;}
	.container input[type=button]{background: green none repeat scroll 0 0;
    border: 0 none;
    color: white;
    font-weight: bold;
    padding: 3px;
    width: 154px;}
    .container table {margin: auto; margin-top: 36px;}
</style>

Jika sudah di salin kemudian teman teman save dan jalan kan di browsernya, kemudian lihat tampilannya .

Cukup mudah bukan?kita telah selesai mengerjakan tentang Bagaimana Cara Membuat Show Dan Hide Password, oke cukup sekian tutorial tentang tentang Bagaimana Cara Membuat Show Dan Hide Password.

Selamat mencoba dan terimakasih …

#KeepLearn

#IsmetMA