Goal: To create a multi-browser compatible table less CSS driven XHTML compliant web form. In this article I will not go into the backend code. We will simply create the layout. In next article I will get inot the backend and create the fully fuctional form using ASP.NET. So if you are ineterested on the series of articles make sure you subscribe to the RSS Feed or bookmark this site. So for this artcile we want our end result to look like this: 
You can download the fully source code including images from our download section. You will need to register before you are able to view the downloads. It is completely free.
The XHTML part of it is pretty straight forward. Below id the complete 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>
<title>Contact Form</title>
<link href="style/form.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="wrapper">
<h1>
Contact Us</h1>
<fieldset>
<legend>Personal Information</legend>
<p>
<label for="name"> Name: </label><input type="text" name="name"id="name" />
</p>
<p>
<label for="email"> E-mail: </label><input type="text" name="email" id="email" />
</p>
<p>
<label for="phone">Phone: </label><input type="text" name="phone" id="phone" />
</p>
</fieldset>
<fieldset>
<legend>Your Message</legend>
<p>
<textarea name="message" cols="30" rows="5" id="message"></textarea>
</p>
<label for="no" > </label>
<p><label for="Attachment">
Attachment :</label><br />
<input type="file" name="attachment" id="attachment" /></p>
</fieldset>
<input id="submit" name="submit" type="button" value="Submit" />
</div>
</body>
</html>
The only thing to note here is the tag where you add the css style on line 4. As you can see we are not using any tables to format this form. Now lets get into detailf for the CSS.
First we style the form body. Below is the CSS code and explanation:
body
{
font-family:Tahoma; /* Set your font family choice here*/
font-size:.8em; /*Set your font size here*/
color:#7F0000;/*setting font color here*/
background-color:black; /*setting body background color here*/
}
H1
{
font-size:2em; /* Set Heading One Font Size*/
font-weight:normal; /*Set Font weight here. It could be bold, italics and so forth */
margin-left:15px; /*We use margin to create spacing*/
margin-right:15px; /*We use margin to create spacing*/
padding-left:20px; /*We use padding to create spacing within the header*/
margin-top:20px; /*We use margin to create spacing*/
/*Setting border properties in the next two line. This creates the black line that
you see on the header top and bottom*/
border-top: solid 1px black; /*Setting border properties*/
border-bottom:solid 1px black; /*Setting border properties*/
background-image:url(../images/icon.gif); /*setting the background to create the icon
on the left side of the heading text*/
background-repeat:no-repeat; /*We do not want this backgorund to repeat this tage ensures that*/
background-position:left; /*we want our icon to be on the left of the heading*/
letter-spacing:.3em; /*This property creates the spacing between each letters*/
} /*Setting wrapper properties. Wrapper is the div ID that hold all the form elements*/
#wrapper {
width: 550px; /*Setting div width properties*/
background-image: url(../images/bg_form.jpg); /*Setting bacground image properties*/
background-repeat:repeat-y; /*We want this backgorund to repeat vertically this tage ensures that*/
background-position:top; /*we want our background image to be on the top of the div*/
border: 1px solid black; /*Setting border properties*/
/*The following two margin properties positions our div centered. This is pretty coll because no matter what is the screen size of an user this will always center the div*/
margin-left:auto;
margin-right:auto;
}
fieldset {
width: 90%; /*Setting width to 90% of the wrapper*/
border: 1px solid #000; /*Setting border properties*/
padding: 0 1em 1em 1em; /*We use margin to create spacing*/
margin-left:15px; /*We use margin to create spacing*/
}
/*The Legend Properties*/
legend {
color: maroon; /* Sets the text color for the Legend*/
letter-spacing: 0.2em; /*This property creates the spacing between each letters*/
font-weight: bold; /*Set Font weight here. It could be bold, italics and so forth */
padding: 0.5em 1em; /*We use padding to create spacing*/
margin-left:auto;
}
#submit{
margin-left:17px; /*We use margin to create spacing*/
margin-top:30px; /*We use margin to create spacing*/
margin-bottom:30px; /*We use margin to create spacing*/
height:25px; /*Heigh for the submit button*/
width:150px; /*Width for the submit button*/
background-color:Maroon; /* Sets the background color for the submit button*/
color:White; /* Sets the text color for to white*/
font: bold 1em tahoma; /* Sets the text properties for the submit button*/
}
I hope this artcile will be useful to some of you. Don't forget to download the source from download section. If you enjoyed the article please do bookmark it and stay tuned for the next article where I will show you how to make the form functional with ASP.NET. If you have any questions or comments feel free to post it in our forums section. Feel free to use the graphics any where you want.
|