This blog has moved here: woorkup.com | FOLLOW ME ON TWITTER @woork
Monday, June 9, 2008

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

blog comments powered by Disqus
Justin French said...

I think this is a great start, but there's a long way to go here (and I encourage your readers to dig in deep). For example, those radio buttons are a group of related fields, so they should be in a fieldset, and what about inline error messages, hints, tips, date selectors, etc, etc.

I'm slowly building Formtastic, a free Rails plugin to handle most of this, but for those in other languages or frameworks (or those living in HTML alone) I can highly recommend Aaron Gustafson's Learning to Love Forms presentation.

Fede777 | Geekspot said...

Hey Antonio, is it possible to add the HTML code to actually make the form work??

I want to make a contact form without using a plugin. You can email it to me fede777 [at] gmail.com

Thanks.

Andrea Hill said...

my biggest concern with using a list in that context is that users of screen readers will hear "unordered list of X items" which would be confusing.

Forms are definitely an area of contention. I've seen people use definition lists to mark them up as well, but that is also a bit misleading from a screen reader standpoint. I personally try to just use the label and input to style. That works until you have instructional text to align as well...

Mike said...

Happy to see the fields in a fieldset in this tutorial.

webpixelkonsum said...

I love your style to share you know how ;)

Anonymous said...

I have to respectfully disagree with the use of lists for forms. It just screams 'shortcut'. I'm still glad you posted this, since it gets everyone thinking for themselves how to best markup their forms rather than merely copy & paste the code.

Andy Ford said...

the closing UL tag needs a slash!

Also, I've never seen anyone put the fieldset element outside of the form element. It appears to be valid, so I guess it's not a problem. Personally I prefer to use the form element as the outermost wrapper for the form, and then nest the fieldset(s) inside.

FVxSF said...

For forms, some will argue divs over tables while others will argue tables over divs. I never thought to crate a form with ul/i. As one poster stated:
"I have to respectfully disagree with the use of lists for forms. It just screams 'shortcut'."
I respect his opinion but my thought is not a 'shortcut' but rather a W3C Valid and Creative Solution. It saves a little code and is nice and clean.

Anonymous said...

It has already been done, discussed, criticized: Are Lists Becoming the New Tables?

Optimisation pour les moteurs de recherche said...

Thanks, very useful.

Eversuns said...

One thing I gotta ask, how do you do those awesome diagrams?

Jennifer said...

Hey hermano, thanks for the link love!

I still prefer [dl]. I'll post a tutorial soon detailing my reasons why.

What do you use for code hiliting in your posts?

Steve Rose said...

How to layout a form is indeed a good topic of discussion, so I'm glad you are having this discussion.

I don't consider form fields to be a list of things, so I consider the mark up not to be semantic, regardless of whether it works or is valid. Maybe I'm a purist, but I think list markup should contain lists of things.

Mike Robinson said...

In my opinion it makes more sense to use a DL since, for example, the user is defining what their name is. Dustin Brewer recently wrote about this.

As for the fieldset being outside, it would be better to have it inside the form since their purpose is to group related fields together. If your form exapnded with more inputs you would have to put the fieldsets inside to group the related inputs within that form. Your method either means having only one fieldset for all the inputs, or multiple forms for each set of inputs ;)

Still, nice tutorial!

Laura De Masi said...

I think that a form is not a list item, IMHO this code doesn't respect the semantics..

Mike Robinson said...

Actually, I've given this much more thought. Neither unordered or definition lists are appropriate. But ordered lists might be. In form design the field order is important for minimizing errors and increasing efficiency. I have just posted about this and I am keen to hear what other people think :)

Anonymous said...

Its very nice I m using this

Wolverine said...

is there any way in which we can set recipient email address and we do not use any other websites's plugin contact form... i hope u understood...

i want to design a contact form where reader fill in and when they clcick on submit...i get the mail directly not thru any other website......

dandidas said...

If it's ok I would like to ask a question to this audience, particularly in this context.

I am using li for tabs, and it's going well with one exception. I am trying to find a way to determine which li got the click event.

Would greatly appreciate any help.

Peter Schaefer said...

This is a great start but can be pushed further. Check out Emblematiq Niceforms. This script will replace common form elements with custom designed ones. Check out Lautus Design for an example!

Janckos said...

last tag: ul should be closed.

  • Twitter Follow woork on Twitter
  • RSS Feed Subscribe to stay up to date
  • Podcast Coming soon...
  • 0 delicious lovers save
Share your links. Do you want to suggest any interesting link about web design or tech news? Submit your link.
Submit a News