CSS Examples Tableless forms using CSS
Author: CSS Drive
This CSS example transforms a conventional form so it's tableless. A form that doesn't use tables for its layout is much more lightweight and semantically correct.
<input type="text" name="user" value="" /><br />
<label for="emailaddress">Email Address:</label>
<input type="text" name="emailaddress" value="" /><br />
<textarea name="comments"></textarea><br />
<label for="terms">Agree to Terms?</label>
<input type="checkbox" name="terms" class="boxes" /><br />
<input type="submit" name="submitbutton" id="submitbutton" value="Submit" />
By floating the "label" tag to the left, the text description of each form field appears to the left, resulting in a "two column" look for the form. The width of the "label" is controlled, so it will comfortably contain the longest text description in the form. I throw in a <br> tag with "clear: left" after each form field to prevent the floating <label> tag from potentially spilling over to content beneath it. Margins such as "margin-top" and "margin-bottom" are also used to add some nice margins between form fields.
thanks very much for the tutorial. it really help me understand css and i hv come to love it now.
Thank you for you guide. I've been looking for something like this.
Thank you again! :)
Very nice! It's lean, clean, and accessible! Thanks!
what's with the pixel positioning!? this will break horribly when you change font-sizes. use em as unit instead!
its a very simple and great form. I lie it.