How to construct HTML forms with Unordered Lists

With this post I’m gonna illustrate you how to create html forms using unordered lists.

When you cut-up photo shop designs into css/xhtml layouts, you can use unordered list for greater extend to build your html layouts.

Power of lists cannot gauge, I would say it can even replace DIVs. Some css/xhtml coders think lists are to show billeted content and menus, wrong guess.

I feel since a list gives more controlled html code and in return it gives fewer troubles when it comes to browser compatibility.

Most html coders prefer to use DIVs or fieldset tags to build html forms.

But lists will furnish you more power on building this kind of HTML form layouts, it acts like a replacement for html tables.At WeCodeYourSite we do lot of research into this and so far it is real successful.

Let’s dig into the html code segment below,

</ul>
<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 produce a registration form, a very basic one.The html code is very straitforward with lists.Let me show you how simple the css/xhtml, 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/xhtml code.

Let me explain what each css/xhtml style does.

As we all aware that the unordered list(ul) tag will be the parent control tag, will going to grip all the list items together.

By using style value none for list style type we can take away bullets that comes default for unordered lists or ordered list(the other counterpart list).

Remember both unordered list(ul) plus ordered list(ol) tags by default you get 20 pixel margin. For some browsers it acts as padding for some it acts as margin.

If you don’t need that you be able to remove default margin and padding by setting it to 0 pixel for both under unordered list style property.

This default margin padding Confuse most of css coders, at the beginning of their career.

Then width is to set the form, width and the float property is necessary 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 ordinary width for list item that is the width of the form labels.

Last css/xhtml 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/xhtml it is very simple and easy maintenance. You can find the complete sample here