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.
That's a horrible solution! It uses fixed sizes in pixels. If you use tables, it will intelligently size the columns.
This is for testing only.
You can also use percentages or other measurement types to make these flow as well. Tables are certianly not the ideal solution.
The float didn't seem seem to work right for me at all. I have IE 6.0 on Windows XP. The columns are directly after the label so it doesn't look good at all. And the label is aligning at the bottom, not the top as in the example.
Actually, it wasn't finding my .css file. I prefer to use .css files and reference them instead of adding the style code to the header. When I put the css code directly in the header it works. There's no logical reason for it not to work using a .css file. My reference is below:
<stylesheet" TYPE="text/css" HREF="tableless_form.css">
There are no typos and the file resides in the same dir as the html file. Any ideas why it doesn't work?
the validation error is fixed by adding cols="" rows=""
< name="comments" cols="" rows="" id="comments"textarea><textarea>
>> <stylesheet" TYPE="text/css" HREF="tableless_form.css">
>> Any ideas why it doesn't work?
<stylesheet" type="text/css" href="tableless_form.css" />
ou crap... forum's php code sucks big time...
This is nice, but you have to hard code the label width. Is there any way of making them expandable according to their content and yet still making all inputs align, like you can do with tables?