FORM elements design using CSS and list (ul and dl)

Tables are useful to design complex HTML forms but a good alternative is to use list elements and CSS.

After my last post (Clean and pure CSS FORM design) I receive a lot of messages with some suggests, opinions and critics about the method illustrated in these post to design a FORM using pure CSS code. I have to say I prefer to use table to place FORM elements into the page, but another method I often use is the following: using unordered list (<ul>).

In this post I would show another way to design FORM using list elements <ul> and <li> (Jennifer also suggested to use <dl> tag). In any case, if you want to use pure CSS code instead of HTML table to design your FORM I think this is a good way to do it.

Download source code


Step 1: HTML Code
HTML code is very simple. I use a <fieldset> to contain our form and I placed each form element inside a <li> tag as it was a row of a table:

HTML code is:

<fieldset>

<legend>Sign-up Form</legend>
<form name="signup" action="index.html" method="post">
<ul>

<li> <label for="name">Name</label>
<input type="text" name="name" id="name" size="30" />
</li>

<li> <label for="email">Email</label>
<input type="text" name="email" id="email" size="30" />
</li>

<li> <label for="psw">Password</label>
<input type="text" name="psw" id="psw" size="30" />
</li>

<li> <label for="free">Free Subscrition</label>
<input type="radio" name="subscription" id="free"/>
</li>

<li> <label for="professional">Professional</label>
<input type="radio" name="subscription" id="professional"/> </li>

<li>
<label for="newsletter">Newsletter</label>
<input type="checkbox" name="newsletter" id="newsletter"/>
</li>

<li><label for="submit"></label>
<button type="submit" id="submit">Send</button> </li>

<ul>
</form>

</fieldset>

...and CSS code "to simulate" a table structure where to place each form element is:

fieldset ul, fieldset li{
border:0; margin:0; padding:0; list-style:none;
}
fieldset li{
clear:both;
list-style:none;
padding-bottom:10px;
}

fieldset input{
float:left;
}
fieldset label{
width:140px;
float:left;
}

The result is something like this:

Ok, I admit, it don't look so nice, but with some lines of CSS code we could do a good job to make it more grateful.

Download source code


Related Post
Clean and pure CSS FORM design
Table's anatomy: why tables are not so bad
Are you a CSS fanatic?
Improve form usability with auto messages