PHP Tutorial Online: Creating a Admin Login form

Here is the Example of Admin Login form psd file:
Here is the Html and Css Code for the login form:
<!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>Untitled Document</title>
<style type="text/css">
* {
    margin:0px;
    padding:0px;}

fieldset {
    width:575px; 
    height: 335px;
    margin: auto;
    background:url(images/bg_02.png) repeat-x;
    border:none;
    position:relative;
    margin-top: 150px;
    border: 1px solid #d6d6d6;
    }
div {
    width:356px; 
    height:180px;
    margin:119px 0px 0px 112px;
    position:absolute;

}

input { 
    width: 356px;
    height: 48px;  
    border:none; 
    margin-bottom:18px;
    border-radius: 4px;
    color:#fff; 
    padding-left:10px;
    background-image:url(images/man_03.png) no-repeat;
    background: #000;}

button { 
    width:96px; 
    height: 40px; 
    font-weight:bold;
}

.forgot {
    float: right; 
    font-weight:bold;
}

h3 {
    font-size: 50px; 
    font-family:"Monotype Corsiva", cursive; 
    position:absolute; 
    margin:37px 0px 0px 118px;
    color:red;
    }

.erroruname {
    width:48px; 
    height:41px;
    background:url(images/Login-page-templates_03.png)no-repeat;
    position:absolute; 
    float:left;
    margin:-82px 0px 0px 346px;
}

.erroruname img { 
    position:absolute; 
    margin:33px 0px 0px -14px;
}

.errorpass {
    width:48px;
    height:41px; 
    background:url(images/Login-page-templates_06.png)no-repeat; 
    position:absolute;
    float:left;
    margin:-82px 0px 0px 346px;
}

.errorpass img {
    position:absolute;
    margin:33px 0px 0px -9px;
    }

</style>

</head>

<body>
<form id='login' action='login.php' method='post' accept-charset='UTF-8'>
<fieldset>
<h3>Admin Login Here</h3>
<div>

<p>
  <input type="text" id="username" name="username" value="User Name"  />
  <span class="erroruname"><img src="images/man_03.png" alt="user" /></span>
</p>
<p>
  <input type="password"  id="password" name="password" value="password" />
  <span class="errorpass"><img src="images/Login-page-templates_07.png" alt="user" /></span>
</p>
<p><label><button>Login ></button></label> <span class="forgot">Forgot Password ?</span>
    
</p>
</div>

</fieldset>
</form>


</body>
</html>
PHP Tutorial Online

Pages

Tuesday, April 17, 2012

Creating a Admin Login form

2 comments:
