Pure CSS div based form design / form layout

Pure CSS div based form design / form layout

Pure CSS div based form design / form layout

Pure CSS div based form design / form layout

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Div Based Form Design</title>
<style>
body
{
margin:0;
padding:0;
font-family:verdana;

}
p{font-size:14px;margin:0;padding:0;}
h1{font-size:18px;margin:0;padding:0;}

#myform
{
width:400px;
border:2px solid grey;
padding:14px;
margin:0 auto;
}

.mystyle
{
border-bottom:1px solid grey;
padding:5px 0 5px 0;
margin:0 0 10px 0;
}

#myform label
{
font-size:13px;
float:left;
width:200px;
text-align:right;
display:block;
}

#myform span
{
font-size:11px;
color:grey;
width:200px;
text-align:right;
display:block;
}

#myform input
{
border:1px solid grey;
font-family:verdana;
font-size:12px;
color:grey;
height:16px;
width:150px;
margin:5px 0 20px 10px;
}

#myform button
{
clear:both;
margin-left:150px;
background:grey;
color:#FFFFFF;
border:solid 1px #666666;
font-size:12px;

}

</style>
</head>
<body>
<div id="myform">
<form>
<h1>Login Window</h1>
<p>Welcome to the My Site</p>
<label>Username
<span>Its Your username/email id</span>
</label>
<input type="text" name="uname">

<label>Password
<span>Enter Your Password</span>
</label>
<input type="text" name="passw">
<button>Submit</button>
</form>
</div>
</body>

</html>

Thanks,
Nikhil
(WE:B DeSigNer)
Mumbai,IN

Nikhil on Deviant Art
http://designikx.deviantart.com
Art – community of artists and those devoted to art. Digital art, skin art, themes, wallpaper art, traditional art, photography, poetry / prose. Art prints.

Nikhil on Twitter
http://twitter.com/designikx

Advertisements

About Nikhil
Name : Nikhil Ughade UI Developer, Accidentally in design field, no turn back since then. Location : Pune (MH, INDIA) From : Amravati (MH,INDIA) College : VYWS's College Of Engg. Badnera, Amravati Hobby : Social Networking, Designing Web Sites, Photography, Reading Books. In Free time works for NGO.

One Response to Pure CSS div based form design / form layout

  1. This is elegant and beautiful. Thank you!

Leave a Reply

Please log in using one of these methods to post your comment:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: