How to create HTML forms using Lists

With this article I’m gonna show you how to create html forms using un-ordered lists. When you slice photo shop designs into css/html layouts, you can use list for greater extend to build your html layouts. Power of lists cannot measure, I would say it can even replace divs.

Some css coders think lists are to show billeted content and menus, wrong assumption. I feel since a list gives more organized html code and in return it gives less troubles when it comes to browser compatibility.  Most html coders prefer to use divs or fieldset tag to build html forms. But lists will give you more power on building this kind of HTML form layouts, it acts like a replacement for html tables. Let’s dig into the html code segment below,

<ul>
 <li>Name :</li>
 <li>
 <input id="txtDiscount" type="text" /></li>
 <li>Address :</li>
 <li>
 <input id="txtAmount" type="text" /></li>
 <li></li>
 <li>
 <input id="Text1" type="text" /></li>
 <li></li>
 <li>
 <input id="Text2" type="text" /></li>
 <li>City</li>
 <li>
 <input id="txtDisAmt" type="text" /></li>
 <li>State</li>
 <li>
 <input id="txtNetAmt" type="text" /></li>
 <li>Notes</li>
 <li>
 <textarea id="Text3" rows="5" cols="30" ></textarea></li>
 <li></li>
 <li>
 <input id="Submit1" type="submit" value="Send" /></li>         
 </ul>

Above html code will generate a registration form, a very basic one. The html code is very simple with lists.

Let me show you how simple the css, which will style above html code to look professional html form.

ul{list-style-type: none;float:left;width:400px;}
ul li{float:left;width:150px;margin-top:10px;}
ul li.input{width:250px;}

Look how simple the css code. Let me explain what each css style does. By using none for list style type we can remove bullets that comes default for lists. Width is to set the form, width and the float property is required to keep the floated list items within the frame together, list item top margin will keep the gap between form controls. Here i have used a common width for list item that is the width of the form labels. Last style is to override the default width of the list item to accommodate more space to input controls.

If you look at overall html and css it is very simple and easy maintenance. You can find the complete sample here