Web design elements: form design

In the last lesson, we looked form elements and their attributes. In this lesson, we’ll look at how to structure forms using XHTML, how to apply basic styling, and the most standard layouts used. 

In general, it is considered standard practice to put one element per line. In this manner, users have an easy path to follow to complete the form and can concentrate on one field at a time.

The most important decision is where to put the label. The most used positions are:

Above the fields (Ebay).

To the left of the fields, left-aligned (Google).

To the left of the fields, right-aligned (Yahoo).

This choice depends on various aspects: purpose of the form, type of information asked, speed of compilation. We’ll look at the advantages of each type of positioning, one by one.

Registration form: HTML

But first, let’s look at how to structure a simple registration form in XHTML. Here’s the markup:

<form action="#" method="post" id="formYIW">
  <fieldset>
    <legend><span style="color: #ff0000;">Personal dates</span></legend>
    <ol>
      <li>
        <label for="name"><span style="color: #ff0000;">My name</span> <abbr title="<span style="color: #ff0000;">required field</span>">*</abbr></label>
        <input type="text" name="name" id="name" tabindex="1" />
      </li>
      <li>
        <label for="surname"><span style="color: #ff0000;">My surname</span> <abbr title="<span style="color: #ff0000;">required field</span>">*</abbr></label>
        <input type="text" name="surname" id="surname" tabindex="2" />
      </li>
      <li>
        <label for="email"><span style="color: #ff0000;">My e-mail</span> <abbr title="<span style="color: #ff0000;">required field  </span>">*</abbr></label>
        <input type="text" name="email" id="email" tabindex="3" />
      </li>
    </ol>
  </fieldset>
  <fieldset>
    <legend><span style="color: #ff0000;">Address</span></legend>
    <ol>
      <li>
        <label for="address">Address</label>
        <input type="text" name="address" id="address" tabindex="4" />
      </li>
      <li>
        <label for="city"><span style="color: #ff0000;">City</span></label>
        <input type="text" name="city" id="city" tabindex="5" />
      </li>
      <li>
        <label for="province"><span style="color: #ff0000;">Province</span></label>
        <select name="province" id="province" tabindex="6">
          <option value=""> - <span style="color: #ff0000;">Select your province</span> - </option>
          <option value="Agrigento">Agrigento</option>
  	      ...
        </select>
      </li>
    </ol>
  </fieldset>
  <p class="controls">
<input type="submit" name="submit" id="submit" value="<span style="color: #ff0000;">Sign in</span>" tabindex="7" />
  </p>
</form>

Let’s take a look at the main points:

• Inserting a form ID so you can later apply specific styling.
• Grouping various elements inside of the fieldset tag, with relative legend, grouping by type. In the example, I grouped personal information elements together, as well as address information.
• Using block-level elements, like paragraphs, lists, div, to group elements. In the example I used an ordered list to group various elements (except the submit button, which was grouped in a paragraph): the list method is a personal choice, divs and paragraphs work well, too.
• Adding the tabindex attribute to each input, in order to overwrite the default order applied by the browser.

The last thing I’d like to focus on is the use of the abbr tag to indicate required fields: in fact the asterisk is an abbreviation that indicates “required field” and this trick makes our code more meaningful.

Here’s the resulting form, without any styling applied. As you can see, the form is well structured and meaningful even without a stylesheet.

Registration form: basic CSS

We’ll add some basic styling, eliminating the browser defaults:

body,h1,ol,ul,li,p{margin:0;padding:0;}

body{
  background-color:#FFF;
  color:#333;
  font:75%/1.4 Helvetica,Verdana,Arial,sans-serif;
}

#formYIW{
  margin:3em auto;
  width:74%;
}

#formYIW fieldset{
  border:none;
  padding:1.5em;
  padding-top:0;
  position:relative;
}

#formYIW ol{
  list-style:none;
  margin-top:3em;
}

#formYIW li{
  padding-bottom:1em;
}

I zeroed out margins and padding in the most common elements (this was enough for the example, for your projects you could consider using a more complete reset CSS), I eliminated the numbering in the ordered list, and centered everything.

A “painful” choice: the legend element

The appearance of the legend is notoriously difficult to modify. This is because different browsers treat it in different ways: some like an element inside of the fieldset, others like an external element; and this notably complicates things. A quick solution is to add an extra (and unneeded) span inside the fieldset and therefore to apply any styling to it:

<fieldset>
  <legend><span><span style="color: #ff0000;">Legend</span></span></legend>
  ...

This solution, effective though it is, adds insignificant markup to the XHTML file: if you can live with it, great; but if you can’t sleep at night because you feel guilty of a serious crime (oh how I understand!), you can avoid this by using JavaScript or jQuery. For example this line of code:

  $('legend').wrapInner('<span></span>');

gives you the same result (using jQuery) without overloading the HTML file.

So now we’re ready to add styles to the legend, as well as those for required fields and the submit button:

...
fieldset legend span{
  background-color:#6CA0F6;
  font-size:1.5em;
  padding-left:1em;
  position:absolute;
  top:0;
  width:100%;
}

#formYIW abbr{
  border:none;
  color:#F00;
  cursor:help;
}

p.controls{
  border-top:1px solid #6CA0F6;
  padding:1.5em;
}

This is the result of the first phase. Now let’s look at the pros and cons of the various label alignment methods.

Top-aligned labels

Of the three methods suggested, this is the most used, and for a good reason: it’s the one that guarantees the quickest input time by users. This is due to the close proximity of label and input field: it takes just a glance to pair the two elements and rapidly complete the form. Another advantage of this method is the greater space available for the label that, even if it is long, doesn’t alter the general structure of the form.

The only disadvantage is the increased use of vertical space: compared to laterally aligned elements it’s almost double, which gives the impression of a longer form to fill in.

The CSS for this effect is very simple:

#formYIW label{
  display:block;
}

input, textarea, select{
  display:block;
}

All fields and labels are block level so each occupies a separate line, thus obtaining  this result.

Right-aligned labels

As in the preceding example, the small distance between label and input field allows for a rapid association of the two elements. The problem is that western languages are read from left to right, therefore greatly limiting the possibility to quickly scan the labels, due to the various indentations present.

The CSS code for this structure is as follows:

#formYIW label{
  float:left;
  margin:5px 10px 0 0;
  text-align:right;
  width:10em;
}

We float the labels, taking care to apply a fixed width and a small right margin so the labels aren’t too close to the input fields. The specified fixed width will cause longer labels to break to the next line, so it’s important to keep this detail in mind. Lastly, we right-align the text, obtaining this result.

Left-aligned labels

Of the three methods, this one takes the longest for form completion, due to the various “jumps” between the labels and their corresponding input fields. This could seem like a negative aspect, but it’s not so. Think about a form that collects somewhat unfamiliar data (for example credit card number or bank branch address): the longer input time needed allows the web designer to “slow down” users, in this manner they complete the input fields more carefully. In addition, the left-alignment allows for a quick scan of the labels.

The CSS is identical to the previous example, except for the text alignment:

#formYIW label{
  float:left;
  margin:5px 10px 0 0;
  width:10em;
}

And this is the final result.

Conclusion

Behind every design choice hides a world of details that can make a difference. In this article we saw an example of just how true this is. If the topic piqued your interest, I suggest you read the study by Matteo Penzo that covers in greater depth the aspects listed here. Next week we’ll see how to validate data “on the run” using jQuery and we’ll make some final considerations about this fascinating topic.

• Forms: basic elements
• Forms: structure and appearance
• Forms: jQuery and things to consider

*****************************************
L'immagine principale dell'articolo è stata fornita da @Fotolia