Who is Skillen?

Forms without the Flab

Wednesday 4th March, 2009

The problem with forms on the web seems to be that they require extra markup in order to display correctly.  Often you will see web forms encased in <p> tags or worse <td> tags, that obscure the semantic flow of the form. The form would be so much more readable and simpler if we could just use <label> tags together with their appropriate form input field.

I decided to design the form in my own site using just the form tags and a bit of css markup, so the code just reads:

<form>
            <fieldset>
            		<label></label>
                 	<input/>
                 	<label></label>
                 	<input/>
                  	<label></label>
                  	<input />
                  	<label></label>
                  	<textarea></textarea>
                  	<input/>
             </fieldset>
            
  </form> 

I have made the form as adaptable as possible so a couple of changes to the css file will give you a form with left aligned labels, right aligned labels or stacked. You can find the live demo here.

Here is the basic code for a basic contact form. Just standard labels and input fields wrapped in a fieldset tag.

<form  id='freeform' method="post" action="contact/" >
          		<fieldset>
                	    <label  for="name">Name</label>
                        <input type="text"  name="name" id="name" />
                        <label  for="email">Email</label>
                        <input type="text"  name="email" id="email" />
                        <label  for="website">Website</label>
                        <input type="text"  name="website" id="website" />
                        <label  for="comments">Comments</label>
                        <textarea name="comments" id="comments" rows="7" cols="5">
                        </textarea>
                        <input class="submit"  type="submit" />
                 </fieldset>
  </form>

Now for the css. I decided to use floats for the form layout for the simple reason that it is the most adaptable and works in the most popular browsers. At some point I may look at the possibility of doing it with display=”table”.

To achieve a form left-aligned fields like in the example opposite simply add

label  {
            display: block;
            float: left;
          }

Then add the width you wish the labels to be, the form works just as well with a fluid layout as static, so percentage value are fine.

Then stipulate the width value for the input and textarea form elements, as long as the widths of the labels and the input fields do not exceed the width of the containing element or 100% then the form will line up correctly. The form uses the simple css columns technique that we all know well, regularly used for layouts but rarely for forms.

Of course the form is looking a bit cramped and plain at the moment, so let’s add some space and style. Remember when adding padding  or margins to the elements in one column, to add it to them in the other one.

Set the text size to 14px:

form  {

            font-size: 0.875em;

            }

I find the optimal amount of space to have with this text size is:

label  {
            margin: 0.5em 0;
            padding: 4px;
            }
            input,  textarea {
            margin: 0.5em 0;
            padding: 4px;
            }

Add widths to the label and input elements:

label  {
            margin: 0.5em 0;
            padding: 4px;
            width: 15%;
            
            }
            input,  textarea {
            margin: 0.5em, 0;
            padding: 4px;
            width: 15%;
            }

Add 15.5% to the left margin of submit button. The extra 0.5% is to accommodate for the padding on the labels.

This give you the basics of a rough, fluid form, which will display correctly in all but the smallest resolutions.  The form is very flexible and only requires the smallest alterations to change the look of the form, for instance; input text-align: right to the label element will align all labels on the right so it has a closer spacial relationship with the input element. Alternatively if you would like the form to display vertically you can remove float: left from the label elements. It is also good practice to adjust the margins here so the relation between the from label and the input field is more obvious.

There you have it, I have tested the form in all browsers and there are no known issues. Below is an live demo of the form, I have added background colours, borders and hover effects to the form to make it more attractive. One note of caution, I have applied the background colour of the form to the fieldset element as Internet Explorer doesn’t display a background on the form element.

See the live demo here.