~Welcome to My Homework Pages~

Welcome banner image.

Forms -Lesson Three

Form Layout & Accessibility Features

So far we have used a definition list to provide some basic layout control.

A very common method of arranging your form input fields and associated text is by using tables. Typically, a table will be set up with 2 columns, one column to hold the text and the other to hold the form object.

Please note that the part of this lesson using Tables for form layout is not a required part of the homework which follows at the end of this lesson. You can use Tables if you want to, or use the Definition Lists that we have been using. Which way you do it is up to you, but don't mix the two - either one way or the other.

Let's put the first part of the form in a table and style it a bit.

Below we have centered the table, and given the left cells with the text an alignment of 'right'.

You can arrange your table to organise your radio buttons and check boxes the same way, although it is accepted practice to have the radio or checkbox buttons before the text.

The code is to the right.

<table width="500" border="0" align="center" cellpadding="5">
<tr>
<td align="right">Please tell me your name:</td>
<td><input type="text" size="30" maxlength="30" name="visitor_name"></td>
</tr>
<tr>
<td align="right">Please enter your e-mail address:</td>
<td><input type="text" name="visitor_email_address" size="30" maxlength="40"></td>
</tr>
</table>

Please tell me your name.
Please enter your e-mail address:

Another form element, which affects the appearance is the 'Fieldset' element. This is used to create groups of form input fields together - hence the name 'Fieldset'. On our form we have 2 sets of radio buttons, one for your visitors age, the other for how often they visit your website.

Instead of using a normal line of text before the radio button groups, we can use the Fieldset element to group them.

To the right you find the radio buttons in Fieldsets and using tables to line them up instead of the Definition List.

1) How old are you?

	Under 18 years old
	Between 18 and 24 years old
	Between 25 and 34 years old
	Between 35 and 44 years old
	More than 44 years old

2) How often do you visit my page?

	Every Day
	Once per week
	Once per month
	Once per year

Please note: I changed the fieldset and legend color of the top sample, to show how one doesn't show well with the background, as well as with the different browsers. This is discussed on the next page.

Fieldset Code

In Depth Explanation:

Because a form element typically expands to the full width of the page, the border drawn by the <fieldset> element would be as wide as the page. Because this is not what we want, both of the fieldsets are inside a table with a set width.

Two Parts:

The fieldset element consists of 2 parts:

The fieldset tags contain the group of form fields that you wish to use for a group, and the legend element provides the fieldset title.

The 2 sets of radio buttons are inside another table each to arrange them. Study the example code above and see how the tables are put together.

Of course, all this is set up between your <form> and </form> tags.

At the right you will find the code used to attain this.

<table width="350" border="0" align="center" cellpadding="5">
<tr>
<td>
<fieldset>
<legend>1) How old are you?</legend>
<table border="0" cellpadding="5">
<tr>
<td><input type="radio" name="age" value="-18"></td>
<td>Under 18 years old</td>
</tr>
<tr>
<td><input type="radio" name="age" value="18-24"></td>
<td>Between 18 and 24 years old</td>
</tr>
<tr>
<td><input type="radio" name="age" value="25-34"></td>
<td>Between 25 and 34 years old</td>
</tr>
<tr>
<td><input type="radio" name="age" value="35-44"></td>
<td>Between 35 and 44 years old</td>
</tr>
<tr>
<td><input type="radio" name="age" value="44+"></td>
<td>More than 44 years old</td>
</tr>
</table>
</fieldset>
<br>
<fieldset>
<legend>2) How often do you visit my page?</legend>
<table border="0" cellpadding="5">
<tr>
<td><input type="radio" name="visit" value="daily"></td>
<td>Every Day</td>
</tr>
<tr>
<td><input type="radio" name="visit" value="weekly"></td>
<td>Once per week</td>
</tr>
<tr>
<td><input type="radio" name="visit" value="monthly"></td>
<td>Once per month</td>
</tr>
<tr>
<td><input type="radio" name="visit" value="yearly"></td>
<td>Once per year</td>
</tr>
</table>
</fieldset>
</td>
</tr>
</table>