JB Visions of Thatcham Berkshire

JBVisions of Thatcham Berkshire

Creative web design

Tableless forms with css

So you've designed your page without any tables and it's looking great. Now you want to add a form..... but wait...... aren't all forms laid out using tables? No. Here's how to do it with CSS

Don't try to submit this form it goes nowhere






In the code sample below, labels are floated to the left so that they form a separate column. If you remove the float from the CSS they will sit above the associated box as in the demo above. The label width is set and this can be altered in the CSS. The clear on the line breaks is used to stop a potential line conflict and margins have been applied to space things out nicely.

In the Option Box, I have chosen to have alternating backgrounds. These are set by two classes. If you don't want this, you can set them both the same colour in the CSS or remove the styles and the class tags from the Options.

Here's the code

If you copy and paste this make sure you paste it as plain text or you will get all the formatting.

CSS
<style type="text/css">

#demoform label{
float: left;
width: 140px;
font-weight: bold;}

#demoform input, #demoform textarea, .locn {
width: 180px;
margin-bottom: 5px;}

#demoform textarea{
width: 250px;
height: 150px;}

#demoform .tick
{width: 1em;}

#demoform #but{
margin-left: 120px;
margin-top: 5px;
width: 90px;}

#demoform br{clear: left;}

.creamback {background-color:#ffffcc;}

.orangeback {background-color:#ffcc99;}

</style>
HTML
<form id=demoform method="post" action="your.file">

<label for="user">Name</label>
<input type="text" id="user" name="user" value="" />

<label for="email">Email Address:</label>
<input type="text" id="email" name="email" value="" />

<label for="locn">Location:</label>
<select class="locn" id="location" name="locn" size="1">
<option selected="selected">Choose from list</option>
<option class="creamback">I'm here</option>
<option class="orangeback">In the office</option>
<option class="creamback">On a bus</option>
<option class="orangeback">Earth</option>
<option class="creamback">Somewhere</option>
<option class="orangeback">Not sure</option>
</select>

<label for="comment">Comments:</label>
<textarea name="comment" id="comment"></textarea>

<label for="tick">Finished?</label>
<input type="tickbox" name="tick" id="tick" class="tick " />

<input type="submit" name="but" id="but" value="Submit" />

</form>



We do much more than just build web sites,
we build customer satisfaction!