HTML Login Form

This is a quick post setting up a nice looking login form using CSS and HTML. The authentication details, including database backend, and scripting are intentionally left out. This is intended to be for beginners and my future reference.

My eventual goal is that this website will utilize the finished blog template... Assuming I actually get it done.

Here is what the finished HTML login form will look like:

Browser View of Login

The HTML is really quite simple:

<body>
<div id="stylized" class="login">
<form id="form" name="form" method="post" action="">
<h1>Login</h1>
<p>Access your account</p>
<!-- Name / Email -->
<label for="email">Email</label>
<input type="text" name="email" id="email" />
<!-- Password -->
<label for="password">Password</label>
<input type="password" name="password" id="password" />
<button type="submit">Login</button>
<div class="spacer"></div>
</form>
</div>
</body>

The CSS is not too bad either:

body{
font-family: Helvetica, Verdana, Geneva, Arial, Helvetica, sans-serif;
font-size:12px;
}

p, h1, form, button{border:0; margin:0; padding:0;}

.spacer{clear:both; height:1px;}

/* ----------- Login Form ----------- */
.login{
margin:0 auto;
width:400px;
padding:14px;
}

/* ----------- stylized ----------- */
#stylized{
border:solid 3px #b7ddf2;
}

#stylized h1 {
font-size:14px;
font-weight:bold;
margin-bottom:8px;
}

#stylized p {
font-size:11px;
color:#666666;
margin-bottom:20px;
border-bottom:solid 1px #b7ddf2;
padding-bottom:10px;
}

#stylized label{
font-weight:bold;
text-align:right;
width:140px;
float:left;
}

#stylized input{
float:left;
font-size:12px;
/*padding:4px 2px;*/
border:solid 1px lightgray;
width:200px;
margin:2px 0 20px 10px;
}

#stylized button{
clear:both;
margin-left:150px;
width:125px;
height:31px;
background:#b7ddf2;
text-align:center;
line-height:31px;
color:#FFFFFF;
font-size:11px;
font-weight:bold;
}

Posts



Examples