CSS XHTML Tutorial

CSS XHTML Tutorial
CSS XHTML tutorial

Saturday, December 26, 2009

How to design a CSS based Login Form

css based 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>CSS Based Login Form</title>

<style type="text/css" media="all">

*{padding:0; margin:0}

body{margin:10px; font-family:Arial, Helvetica, sans-serif; font-size:14px;}

form{border:1px #369 solid; background:#35414e; padding:20px; float:left; border-radius:5px; -moz-border-radius:5px; -webkit-border-radius:5px; -khtml-border-radius:5px; color:#eef;}

label{display:block; margin:10px 0 0;}

input[type=text], input[type=password] {background:#404e5b; border:none; display:block; margin:5px 0 10px; padding:3px; width:300px; color:#eee;}

input[type=submit] {background:#404e5b; border:1px #666 solid; display:block; margin:0 auto; color:#eee; border-radius:3px; -moz-border-radius:3px; -webkit-border-radius:5px; -khtml-border-radius:3px; color:#eee; font-weight:bold; padding:3px; cursor:pointer;}

.legend{border-bottom:1px #eee solid; display:block; font-weight:bold;}

</style>

</head>



<body>

<form name="" id="" action="#" method="">

<span class="legend">Login Here</span>

<label>User Name</label>

<input type="text" name="">

<label>Password</label>

<input type="password" name=""><br />

<input type="submit" value="Login" name="">

</form>



</body>

</html>

1 comment: