Tag Archives: watermark

Watermark Login Page Dengan JQuery

Leave a reply
Watermark Login Page

Watermark Login Page

Pernah login di windows 7? Pada field passwordnya terdapat tulisan watermark “Password” yang jika kita ketik pada field tersebut maka tulisan watermark “Password” akan hilang (hide) lalu jika kita hapus ketikan kita maka tulisan watermark “Password” akan muncul lagi (show).

Untuk membuat login page seperti itu kita bisa lakukan dengan method hide/show di JQuery. Sebenarnya di HTML 5 fitur watermark bisa dilakukan dengan attribute “placeholder” pada input tag, tapi itu hanya bekerja dengan baik di IE 10+ saja. Dengan JQuery maka operasi watermark login seperti windows 7 bisa bekerja di semua web browser populer (IE, Firefox, Chrome, Safari, Opera).

Berikut ini coding HTML-nya.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Log In</title>
<link href="login-style.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function() {
	$('#password1').show();
	$('#password2').hide();
	$('#password1').focus(function() {
		$('#password1').hide();
		$('#password2').show();
		$('#password2').focus();
	});
	$('#password2').blur(function() {
		if($('#password2').val() == '') {
			$('#password1').show();
			$('#password2').hide();
		}
	});
	$('.username').each(function() {
		var default_value = this.value;
		$(this).css('color', '#a0a0a0');
		$(this).focus(function() {
			if(this.value == default_value) {
				this.value = '';
				$(this).css('color', '#000000');
			}
		});
		$(this).blur(function() {
			if(this.value == '') {
				$(this).css('color', '#a0a0a0');
				this.value = default_value;
			}
		});
	});
});
</script>
</head>
<body>
<div id="container">
    <div id="top">
    <h1>Login to Application System</h1>
    </div> 
    <div id="loginbox">
	<fieldset>
		<legend>Please Log In</legend>
		<form name="login_form" class="form">
		<label for="username">User Name</label>
		<div class="div_texbox">
		<input name="username" type="text" class="username" id="username" value="Username" />
		</div>
		<label for="password">Password</label>
		<div class="div_texbox">
		<input class="password" id="password1" type="text" value="Password" autocomplete="off"/>
		<input class="password" id="password2" type="password" name="password" value="" autocomplete="off" />
		</div>
		<div class="button_div">
		<input name="Submit" type="button" value="Submit" class="buttons" />
		</div>
		</form>
		<div class="clear"></div>
	</fieldset>
    </div>
</div>
</body>
</html>

Berikut coding / script CSS untuk login page tersebut.

/* login-style.css */
@charset "utf-8";
body {
	margin:0;padding:0;
	background-color:#ffffff;
	font-family:Arial, Helvetica, sans-serif;
}
fieldset {
	width:460px;
	border:2px dashed #CCC;
	padding:10px;
	margin-top:20px;
	margin-bottom:20px;
}
legend {
	font-size:90%;
	font-weight:normal;
	line-height:1.1;
	color:#fff;
	background: #666;
	border: 1px solid #333;
	padding: 2px 6px;
}
h1 {
	font-size: 175%;
	letter-spacing: -1px;
	font-weight: normal;
	line-height: 1.1;
	color:#808080;
}
label {
	width:140px;
	height:32px;
	margin-top:3px;
	margin-right:2px;
	padding-top:11px;
	padding-left:6px;
	background-color:#CCCCCC;
	float:left;
	display: block;
	font-size: 115%;
	letter-spacing: -1px;
	font-weight: normal;
	line-height: 1.1;
	color:#666;
}
#container {
	width:550px;
	margin:auto;
	padding:10px;
}
#top {
	height:50px;
}
#loginbox {
	width:530px;
	padding-top:30px;
	float:left;
}
.clear {	clear:both;}
.div_texbox {
	width:300px;
	float:left;
	background-color:#E6E6E6;
	height:35px;
	margin-top:3px;
	padding-top:5px;
	padding-bottom:3px;
	padding-left:5px;
}
.textbox {
	background-image: url(images/user.png);
	background-color:#FFFFFF;
	background-repeat: no-repeat;
	background-position:left;
	width:250px;
	font:normal 18px Arial;
	color: #999999;
	padding:3px 5px 3px 19px;
}
.textbox:focus, .textbox:hover {	background-color:#F0FFE6;}
.username {
    	background-image: url(images/user.png);
    	background-repeat: no-repeat;
    	background-position:left;
    	background-color:#FFFFFF;
		width:265px;
    	font:normal 18px Arial;
    	color: #999999;
    	padding:3px 5px 3px 19px;
}
.username:focus, .username:hover {background-color:#F0FFE6;}
.password {
    	background-image: url(images/pass.png);
    	background-repeat: no-repeat;
   		background-position:left;
   		background-color:#FFFFFF;
		width:265px;
    	font:normal 18px Arial;
    	color: #999999;
    	padding:3px 5px 3px 19px;
}
.password:focus, .password:hover{background-color:#F0FFE6;}
#password-clear{display:none;color:#a0a0a0;}
.button_div {
	width:388px;
	float:left;
	background-color:#fff;
	border:1px solid #ccc;
	text-align:center;
	height:35px;
	margin-top:3px;
	padding:5px 32px 3px;
}
.buttons {
	background: #e3e3db;
	font-size:12px; 
	color: #989070; 
	padding: 6px 14px;
	border-width: 2px;
	border-style: solid;
	border-color: #fff #d8d8d0 #d8d8d0 #fff;
	text-decoration: none;
	text-transform:uppercase;
	font-weight:bold;
}

Untuk script JQuery bisa download di website JQuery: http://jquery.com/download/

Disana ada 2 gambar icon yakni, user.png dan pass.png, masing masing bisa anda buat dengan screen capture gambar di atas.

Selamat mencoba.