Creating a form with lots of field could be a tedious task as it involves playing with TR and TD in html table. Along with that it also increases the size and complexity of the html code of out page. e.g. Look at the below form:
Could you imagine it to create without using table or nested div. Well if no then you can just by using easy CSS trick. here is the whole css + html code for doing this.
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Layout Form without Tables</title> <style type="text/css"> .formLayout { background-color: #f3f3f3; border: solid 1px #a1a1a1; padding: 10px; width: 300px; } .formLayout label, .formLayout input { display: block; width: 120px; float: left; margin-bottom: 10px; } .formLayout label { text-align: right; padding-right: 20px; } br { clear: left; } </style> </head> <body> <div class="formLayout"> <label>Title</label> <select> <option>Mr.</option> <option>Dr.</option> <option>Ms.</option> <option>Mrs.</option> </select><br> <label>First Name</label> <input id="name" name="name"><br> <label>Last Name</label> <input id="Text1" name="name"><br> <label>Address</label> <input id="address1"><br> <label></label> <input id="address2"><br> <label>City</label> <select id="city"> <option>New York</option> <option>Chicago</option> <option>etc.</option> </select><br> <label>Zip</label> <input id="zip"><br> </div> </body> </html>
'Simply' Beautiful! Very elegant solution. Thanks for sharing it.
What about checkboxes and radio buttons?IE6 and Safari 3.1.1 misalign the select fields with the text boxes slightly with this code.Sorry for the parade raining!
your label tag should use for="{id of the form element}".
Layout form without... form tag?Ok, it's just an example, but 'div class="formLayout"' could be 'form'.
Ignatius, Yes it could be Form. In that case use:<form class="formLayout">...</form>Henry , you are right. That will good to add. I was just targeting the layout thing here that's why I didn't include that.
great and all if you have a simple form. throw in some radio buttons, checkboxes, nested fields and what have you, and you'll find your simple CSS layout code will become a garbled mess quickly.
dfguy, correct. This trick is for simple form only. For instance login box or basic registration form. This is not recommended for complex and nested form.
I use the same principle in my CSS Framework for Forms: http://code.google.com/p/formy-css-framework/ ;)
Nice work Vladimir. I liked different layouts you have created.
I use this method too, sometimes with left-aligned labels. Other method is use <li> for holding form lines.
Nice clean solution ... but I've seen this exact code somewhere else before ... http://www.quirksmode.org/css/forms.htmlAnyways, the only (very minor) issue I have with this approach is the use of the br tags. Personally I would do something like wrapping each row with a div tag.