Simple Login Page using CSS and Jquery

January 19, 2012 // In: CSS, HTML, Web Design
Here is a very simple login page for your projects..

Code


<!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=iso-8859-1" />
<title>Login Page By Sharp Coders</title>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#userid").focus();
$("#frmLogin").submit(function(){
var userid = $("#userid").val();
var pass = $("#password").val();
if (userid == "" || pass == "")
{
$("#msg").text("Empty Username/Password");
$("#msg").addClass("message");
$("#msg").hide().fadeIn();
return false;
}
var reg = /^([A-Za-z0-9_-.])+$/;
if(!reg.test(userid))
{
$("#msg").text("Invalid Character in Username");
$("#msg").addClass("message");
$("#msg").hide().fadeIn();
return false;
}
});
});
</script>
<style type="text/css">
body{
background-color: #F6F6F6;
}
.login_tbl_txt{
font-family:verdana;
font-size:11px;
font-weight:none;
color:#000000;
text-align:justify;
border:3px #097193 solid;
border-radius: 7px;
-moz-border-radius: 7px;
-o-border-radius: 7px;
-webkit-border-radius: 7px;
background-color: #DFF3FC;
box-shadow: 1px 1px 3px 2px rgba(0,0,0,0.3);
-webkit-box-shadow: 1px 1px 3px 2px rgba(0,0,0,0.3);
-o-box-shadow: 1px 1px 3px 2px rgba(0,0,0,0.3);
-moz-box-shadow: 1px 1px 3px 2px rgba(0,0,0,0.3);
}
.login_tbl_sub{
font-family:verdana;
font-size:11px;
font-weight:none;
color:#000000;
text-align:justify;
border:1px #097193 solid;
border-radius: 7px;
-moz-border-radius: 7px;
-o-border-radius: 7px;
-webkit-border-radius: 7px;
background-color: #5FCCFF;
}
.txt{
font-family:verdana;
font-size:12px;
height: 16px;
font-weight:normal;
color:#000000;
text-decoration:none;
border: 1px #000000 solid;
background:#F1F1F1;
padding-left: 3px;
border-radius: 4px;
-moz-border-radius: 4px;
-o-border-radius: 4px;
-webkit-border-radius: 4px;
box-shadow: inset 0 1px 2px rgba(0,0,0,0.3);
-webkit-box-shadow: inset 0 1px 2px rgba(0,0,0,0.3);
-o-box-shadow: inset 0 1px 2px rgba(0,0,0,0.3);
-moz-box-shadow: inset 0 1px 2px rgba(0,0,0,0.3);
}
.message{
color: #FF0000;
background-color: #FFDFDF;
height: 20px;
font-size: 14px;
border: 1px #FF0000 solid;
border-radius: 5px;
-moz-border-radius: 5px;
-o-border-radius: 5px;
-webkit-border-radius: 5px;
}
</style>
</head>
<body>
<table width="100%" border="0"><form action="" method="post" id="frmLogin" name="frm_login">
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td align="center"><table width="400" border="0" class="login_tbl_txt" bgcolor="#F2F3F5">
<tr>
<td colspan="3" align="center"><img src="imgs/banner.png" alt="Login" /></td>

</tr>
<tr>
<td width="135" align="left" valign="top" style="text-align:justify;">Welcome to Control Panel<br />
<br />Please enter your admin password of the administration dashboard.</td>
<td width="3" align="left" valign="top" style="text-align:justify;">&nbsp;</td>
<td valign="top"><table width="239" border="0" class="login_tbl_sub">
<tr>
<td width="71" height="10"></td>
<td width="152"></td>
</tr>
<tr>
<td>User Name : </td>
<td><input type="text" name="userid" id="userid" class="txt"/></td>
</tr>
<tr>
<td>Password :</td>
<td><input type="password" name="password" id="password" class="txt"/></td>
</tr>
<tr>
<td height="10"></td>
<td></td>
</tr>
<tr>
<td></td>
<td><input type="image" name="imageField" id="submit" src="imgs/buttons/user_login.jpg" /></td>
</tr>
<tr>
<td height="10"></td>
<td></td>
</tr>
</table></td>
</tr>
<tr>

<td align="center" colspan="3"><div id="msg" class=""></div></td>

</tr>
<tr>
<td colspan="3" align="center">Control Panel By : <strong>Sharp Coders</strong> </td>
</tr>
<tr>
<td colspan="3" align="center"><a href="http://sharp-coders.blogspot.com" target="_blank">http://sharp-coders.blogspot.com</a></td>
</tr>
<tr>
<td align="center">&nbsp;</td>
<td align="center">&nbsp;</td>
<td valign="bottom">&nbsp;</td>
</tr>
</table></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
</table></form>
</body>
</html>

How to Set Up Your Own Windows based Web Server at home
CSS shadow Effect (Box Shadow)