Layout and Presentation

A web form filled with a daunting array of text fields, checkboxes, radio buttons and dropdown menus may actually scare a potential user away instead of prompting them to submit information. Hence, the layout and presentation of your web form can have a profound impact on how inviting it looks and how easy it is to discern what it is all about.

HTML tables can be used very effectively to layout your form components. You can also use two special form elements, fieldset and legend, which will help spiff up your form's appearance and structure. These elements are described below.

• Fieldset ~ The fieldset element can be used to draw a box around a group of form components. This element requires both start and end tags. It has no special attributes to speak of however it should be used in conjunction with the legend element otherwise it's rather pointless. Each set of <fieldset>...</fieldset> tags contains all the form components you wish to be grouped together.
• Legend ~ The legend element creates a text label for each fieldset. It must be used inside the fieldset element and should be the first element appearing after the <fieldset> start tag. The legend element requires both start and end tags. Each set of <legend>...</legend> tags contains the text you wish to use to label the respective fieldset.

An Example Form (Advanced)

Below is an example of an advanced feedback form using all the form components described on the previous pages. Below that you will find:

• The HTML source code (which you can copy and modify)
• A quick rundown of the structure
• The structure at a glance

PERSONAL

Your name:	Comments:
Email address:

FOR BREAKFAST I HAD

Eggs Toast Bacon Sausage Orange juice

Cereal Muffin Bacon Pancakes Cold pizza

MY PREFERENCES

I usually have: A light breakfast A BIG breakfast

I like my coffee with: Skim Milk Milk (2%) Cream Whipped cream Sugar Honey A donut A danish A muffin

Submit  Reset

Show table borders  Hide table borders

SOURCE CODE

<div style="width: 500px; border-top: 2px solid white; border-left: 2px solid white; border-right: 2px solid #808080; border-bottom: 2px solid #808080;"> <form action="URL TO FORM SCRIPT GOES HERE" method="post" style="padding: 10px; margin: 0px; background: #d9d9d9;"> <fieldset> <legend><font size="2" color="maroon"><b>PERSONAL</b></font></legend> <table width="100%" cellpadding="10" cellspacing="0" border="0"> <tr><td>Your name:<br> <input type="text" name="realname"></td><td rowspan="2">Comments: <br> <textarea rows="5" cols="30" name="comments" style="overflow: hidden;"></textarea></td></tr> <tr><td>Email address:<br> <input type="text" name="email"></td></tr> </table> </fieldset><br> <fieldset> <legend><font size="2" color="maroon"><b>FOR BREAKFAST I HAD </b></font></legend> <table width="100%" cellpadding="10" cellspacing="0" border="0"> <tr><td width="50%"> <input type="checkbox" name="breakfast" value="eggs"> Eggs<br> <input type="checkbox" name="breakfast" value="toast"> Toast<br> <input type="checkbox" name="breakfast" value="bacon"> Bacon<br> <input type="checkbox" name="breakfast" value="sausage"> Sausage<br> <input type="checkbox" name="breakfast" value="oj"> Orange juice<br> </td> <td width="50%"> <input type="checkbox" name="breakfast" value="cereal"> Cereal<br> <input type="checkbox" name="breakfast" value="muffin"> Muffin<br> <input type="checkbox" name="breakfast" value="bacon"> Bacon<br> <input type="checkbox" name="breakfast" value="pancakes"> Pancakes<br> <input type="checkbox" name="breakfast" value="pizza"> Cold pizza<br></td> </tr> </table> </fieldset><br> <fieldset> <legend><font size="2" color="maroon"><b>MY PREFERENCES </b></font></legend> <table width="100%" cellpadding="10" cellspacing="0" border="0"> <tr> <td valign="top" width="50%"> I usually have:<br><br> <input type="radio" name="appetite" value="light" checked> A light breakfast<br> <input type="radio" name="appetite" value="heavy"> A BIG breakfast<br> </td> <td valign="top" width="50%"> I like my coffee with:<br><br> <select name="coffee2" size="4" multiple> <optgroup label="Dairy"> <option value="skim">Skim Milk</option> <option value="milk2">Milk (2%)</option> <option value="cream">Cream</option> <option value="whipped">Whipped cream</option> </optgroup> <optgroup label="Sweetener"> <option value="sugar">Sugar</option> <option value="honey">Honey</option> </optgroup> <optgroup label="Snack" <option value="donut">A donut</option> <option value="danish">A danish</option> <option value="muffin">A muffin</option> </optgroup> </select> </td> </tr></table> </fieldset><br> <button type="submit">Submit</button>&nbsp;&nbsp;<button type="reset">Reset</button></form></div> <br>

Select all code  Reset

A Quick Rundown of the Structure

1. The entire form in the example above is placed inside in a set of <div>...</div> tags. The style attribute is used in this 'wrapper' div element to apply some CSS properties which do the following:
   
   
   • Set the width at 500 pixels ( width: 500px; )
   • Apply a border 2 pixels in width on all sides
   • Color the border light on the top and left sides and dark on the bottom and right sides to render a 3D effect ( e.g. border-top: 2px solid white; )
2. The form element also has the style attribute inserted to apply some CSS properties which do the following:
   
   
   • Strip the default white space that appears around the form element ( margin: 0px )
   • Move the form components (textfields, checkboxes, etc.) away from the border of the form element ( padding: 10px )
   • Set the background of the form to a light gray
     ( background: #d9d9d9; )
3. The form is divided into three distinct sections. Each section is wrapped in a set of <fieldset>...</fieldset> tags which draws a nice border around each group of components. The legend element is inserted at the start of each fieldset to give it a label.
   
   
4. Inside each fieldset is an HTML table. The table's width is set at 100% to spread the fieldset out to fill the wrapping div element. Each table cell contains an individual form component.

Structure At A Glance

Here's the source code of the example form stripped down and color-coded so that you can visualize the structure at a glance. (Note: Table rows and cells are implied.)

<div style="CSS properties...">

<form action="" method="post" style="CSS properties...">

<fieldset>
<legend>Fieldset label</legend>
<table>Form components...</table>
</fieldset>
<br>

<fieldset>
<legend>Fieldset label</legend>
<table>Form components...</table>
</fieldset>
<br>

<fieldset>
<legend>Fieldset label</legend>
<table>Form components...</table>
</fieldset>
<br>

<button type="submit">Submit</button>&nbsp;&nbsp;
<button type="reset">Reset</button>

</form>

</div>
<br>

*   *   *

And thus concludes the Iron Spider series of tutorials on Interactive Forms. If you want to see a fully functioning web form in action, visit my contact page and send me an email.

<~ BACK

TOP

INTRO