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 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; )
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; )
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.
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.)