Figure 5-20
Structuring Your Forms with <fieldset>
and <legend> Elements
Large forms can be confusing for users, so it’s good practice to group together related form controls. The
<fieldset> and <legend> elements do exactly this — help you group controls.
Both elements were introduced in IE 4 and Netscape 6; however, older browsers will just ignore these
elements, so you are safe to include them in all your forms.
❑ The
<fieldset> element creates a border around the group of form controls to show that they
are related.
❑ The
<legend> element allows you to specify a caption for the <fieldset> element, which acts
as a title for the group of form controls. When used, the
<legend> element should always be
the first child of the
<fieldset> element.
In the following example, you can see how a form has been divided into four sections: contact information,
competition question, tiebreaker question, and enter the competition (ch05_eg17.html).
<form action=” method=”post” name=”frmComp”>
<fieldset>
<legend><em>Contact Information</em></legend>
<label>First name: <input type=”text” name=”txtFName” size=”20” /></label><br />
<label>Last name: <input type=”text” name=”txtLName” size=”20” /></label><br />
<label>E-mail: <input type=”text” name=”txtEmail” size=”20” /></label><br />
</fieldset>
<fieldset>
<legend><em>Competition Question</em></legend>
How tall is the Eiffel Tower in Paris, France? <br />
<label><input type=”radio” name=”radAnswer” value=”584” />
584ft</label><br />
<label><input type=”radio” name=”radAnswer” value=”784” />

❑ The basic event attributes
Note that if you use a table to format your form, the
<table> element must appear inside the
<fieldset> element. If a <fieldset> resides within a table that is used to format the page, then the
entire fieldset must reside within the same cell.
172
Chapter 5: Forms
59313c05.qxd:WroxPro 3/22/08 4:37 PM Page 172
Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
The <legend> element can take the following attributes:
❑
accesskey, which you will learn about in the next section
❑
align (which is deprecated — you should use CSS positioning instead)
❑ All of the universal attributes
❑ UI event attributes
Focus
When a web page featuring several links or several form controls loads, you might have noticed that you
are able to use your Tab key to move between those elements (or Shift+Tab to move backward through
elements). As you move between them, the web browser tends to add some form of border or highlight-
ing to that element (be it a link or a form control). This is known as focus.
From what you have learned already about XHTML, you know that not every element in the document
receives this focus. In fact, it is only the elements that a user can interact with, such as links and form con-
trols, that can receive focus. Indeed, if a user is expected to interact with an element, that element must
be able to receive focus.
An element can gain focus in three ways:
❑ An element can be selected using a pointing device such as a mouse or trackball.
❑ The elements can be navigated between using the keyboard — often using the Tab key (or
Shift+Tab to move backward through elements). The elements in some documents can be given
a fixed tabbing order, indicating the order in which elements gain focus.

<input type=”checkbox” name=”chkNumber” value=”7” tabindex=”10” />Seven <br />
<input type=”checkbox” name=”chkNumber” value=”8” tabindex=”2” /> Eight<br />
<input type=”checkbox” name=”chkNumber” value=”9” tabindex=”8” /> Nine<br />
<input type=”checkbox” name=”chkNumber” value=”10” tabindex=”5” /> Ten<br />
<input type=”submit” value=”Submit” />
</form>
In this example, the checkboxes receive focus in the following order:
4, 8, 1, 3, 10, 6, 2, 9, 5, 7
Figure 5-22 shows how Firefox 2 for PC will, by default, give a yellow outline to form elements as they gain
focus (other browsers give different outlines — Internet Explorer uses blue lines). I have zoomed in on the
item in focus so you can see it in closer detail.
Figure 5-22
You should always start your tabindex values with 1 or higher, rather than 0, because elements that could
gain focus but do not have a tabindex attribute are given a value of 0 and are navigated in the order in
which they appear after those with a
tabindex have been cycled through. If two elements have the same
value for a
tabindex attribute, they will be navigated in the order in which they appear in the document.
Note that if an element is disabled, it cannot gain focus and does not participate in the tabbing order.
174
Chapter 5: Forms
59313c05.qxd:WroxPro 3/22/08 4:37 PM Page 174
Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
Access Keys
Access keys act just like keyboard shortcuts. The access key is a single character from the document’s
character set that is expected to appear on the user’s keyboard. When this key is used in conjunction with
another key (such as Alt on Windows and Control on an Apple), the browser automatically goes to that
section (exactly which key must be used in conjunction with the access key depends upon the operating
system and browser).
The access key is defined using the

Chapter 5: Forms
59313c05.qxd:WroxPro 3/22/08 4:37 PM Page 175
Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
Figure 5-23
Disabled and Read-Only Controls
Throughout the chapter you have seen that several of the elements can carry attributes called disabled
and readonly:
❑ The
readonly attribute prevents users from changing the value of the form control themselves,
although it may be modified by a script. A name/value pair of a
readonly control will be sent
to the server. Its value should be
readonly.
❑
The disabled attribute disables the form control so that users cannot alter it. A script can be used
to re-enable the control, but unless a control is re-enabled, the name/value pair will not be sent
to the server. Its value should be
disabled.
The readonly and disabled attributes were implemented in Netscape 6 and IE 5, although older browsers
ignore them, so you can add these attributes to all documents. You should be aware, however, that because
older browsers ignore these attributes, users with older browsers would still be able to interact with form
controls that have
readonly or disabled attributes.
176
Chapter 5: Forms
59313c05.qxd:WroxPro 3/22/08 4:37 PM Page 176
Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
A readonly control is particularly helpful when you want to stop visitors from changing a part of the
form, perhaps because it cannot change (such as in the case of terms and conditions) or because you want
to indicate to a user something that they have already said, or when. You often see

<input type=”reset” />
No Yes
<input type=”button” />
No Yes
<select>
No Yes
<option>
No Yes
<button>
No Yes
177
Chapter 5: Forms
59313c05.qxd:WroxPro 3/22/08 4:37 PM Page 177
Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
Sending Form Data to the Server
You’ve already learned about the submit button, which the user presses to initiate the sending of form data
to the server, but this book has not yet covered the difference between the HTTP
get and HTTP post meth-
ods.
You might remember that you can specify which of these two methods is used by adding the method
attribute to the <form> element — just as all of the examples in this chapter have done.
The
method attribute can take one of two values, either get or post, corresponding to the HTTP methods
used to send the form data. If the
<form> element does not carry a method attribute, then by default the
get method will be used. If you are using a file upload form control, you must choose the post method
(and you must set the
enctype attribute to have a value of multipart/form-data).
HTTP get
When you send form data to the server using the HTTP get method, the form data is appended to the

Chapter 5: Forms
59313c05.qxd:WroxPro 3/22/08 4:37 PM Page 178
Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
You should not use the HTTP get method when:
❑ You are updating a data source such as a database or spreadsheet (because someone could make
up URLs that would alter your data source).
❑ You are dealing with sensitive information, such as passwords or credit card details (because the
sensitive form data would be visible as part of a URL).
❑ You have large amounts of data (because older browsers do not allow URLs to exceed more than
1,024 characters — although the recent versions of the main browsers do not have limits).
❑ Your form contains a file upload control (because uploaded files cannot be passed in the URL).
❑ Your users might enter non-ASCII characters such as Hebrew or Cyrillic characters.
In these circumstances, you should use the HTTP
post method.
HTTP post
When you send data from a form to the server using the HTTP post method, the form data is sent trans-
parently in what is known as the HTTP headers. While you do not see these headers, they are sent in clear
text and cannot be relied upon to be secure (unless you are sending data under a Secure Sockets Layer, or SSL).
If the login form you just saw was sent using the post method, it could look something like this in the
HTTP headers:
User-agent: MSIE 5.5
Content-Type: application/x-www-form-urlencoded
Content-length: 35
other headers go here
txtUserName=Bob&pwdPassword=LetMeIn
Note that the last line is the form data, and that it is in exactly the same format as the data after the ques-
tion mark in the
get method — it would also be URL — encoded if it contained spaces or any characters
reserved for use in URLs.
There is nothing to stop you using the

3. You have to label the two radio buttons individually:
<tr>
<td>Gender:</td>
<td><input type=”radio” name=”radSex” value=”male” id=”male” />
<label for =”male”>Male</label></td>
</tr>
<tr>
<td></td>
<td><input type=”radio” name=”radSex” value=”female” id=”female” />
<label for=”female”>Female</label></td>
</tr>
If you remember the last chapter’s discussion of table linearization for screen readers, then this should
work fine for most users. If, however, another column were to the right with unrelated information (such
as ads) this could confuse readers, so the table for the form controls should hold only the controls and
their labels.
4. Next you are going to add four new text boxes after the username and password. The first text
input will be to confirm the password and then there will be an empty row. This will be followed
by two text inputs: one for the user’s first name and one for the user’s last name. Then there will
be another empty row, followed by an input for the user’s e-mail address:
<tr>
<td><label for=”confPwd”>Confirm Password:</label></td>
<td><input type=”password” name=”pwdPasswordConf” size=”20”
id=”confPassword” /></td>
</tr>
<tr><td>&nbsp;</td><td>&nbsp;</td></tr>
<tr>
180
Chapter 5: Forms
59313c05.qxd:WroxPro 3/22/08 4:37 PM Page 180
Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.

</select>
</td>
</tr>
<tr><td>&nbsp;</td><td>&nbsp;</td></tr>
<tr>
<td><label for=”mailList”>Please select this box if you wish<br /> to be
added to our mailing list
<br /><small>We will not pass on your details to any third
party.</small></label></td>
<td><input type=”checkbox” name=”chkMailingList” id=”mailList” /></td>
</tr>
</table>
</fieldset>
This extended registration form is now a lot more usable. If you save the file again and open it in your
browser, you should find something that resembles Figure 5-24.
181
Chapter 5: Forms
59313c05.qxd:WroxPro 3/22/08 4:37 PM Page 181
Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
Figure 5-24
How It Works
You should be familiar with most of what is going on here, but let’s just address a few key points.
❑ The form has been divided up into sections using the
<fieldset> element. This added structure
makes it easier to use the form, as the user knows what section he or she is in.
❑ The accesskey attributes, which provide keyboard shortcuts, are particularly helpful if you
are creating long forms, so that users can immediately go to the relevant section. In reality, the
accesskey attributes are more likely to be of use when creating a site that people will use fre-
quently, rather than a form that users will use only a few times. Users tend to use the shortcuts
only if they are familiar with the form already and want to skip between the sections.

You can also organize larger forms using the
<fieldset> and <label> elements and aid navigation
with
tabindex and accesskey attributes.
Finally, you learned when you should use the HTTP
get or post methods to send form data to the server.
Next, it is time to look at the last of our core XHTML chapters, which covers framesets. You will see more
about form design in Chapter 12, which covers some design issues that will make your forms easier to
understand.
Exercises
The answers to all of the exercises are in Appendix A.
1. Create an e-mail feedback form that looks like the one shown in Figure 5-25.
Figure 5-25
183
Chapter 5: Forms
59313c05.qxd:WroxPro 3/22/08 4:37 PM Page 183
Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
Note that the first text box is a readonly text box so that the user cannot alter the name of the
person the mail is being sent to.
2. Create a voting or ranking form that looks like the one shown in Figure 5-26.
Figure 5-26
<head>
Note that the following <style> element was added to the <head> of the document to make
each column of the table the same fixed width, with text aligned in the center (you’ll see more
about this in Chapter 7).
<title>Voting</title>
<style type=”text/css”>td {width:100; text-align:center;}</style>
</head>
184
Chapter 5: Forms

documents.
To create a frameset document, first you need the <frameset> element, which is used instead of the <body>
element. The frameset defines the rows and columns your page is divided into. Each frame is then repre-
sented by a
<frame> element.
You also need to learn the
<noframes> element, which provides a message for users whose browsers do
not support frames.
To get a better idea of how frames work, here is the code for the frameset shown previously in Figure 6-1
(
ch06_eg01.html):
<?xml version=”1.0” encoding=”iso-8859-1”?>
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Frameset//EN”
“ /><html>
<head>
<title>Frames example</title>
</head>
<frameset rows=”150, *, 100”>
<frame src=”top_frame.html” />
186
Chapter 6: Frames
59313c06.qxd:WroxPro 3/24/08 11:35 PM Page 186
Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
<frame src=”main_frame.html” />
<frame src=”bottom_frame.html” />
<noframes><body>
This site uses a technology called frames. Unfortunately, your
browser does not support this technology. Please Please upgrade
your browser and visit us again!
</body></noframes>

frames didn’t make it into HTML until version 4.0.
Now that you have a good idea of how a frameset document appears, before you take a closer look at
the syntax, let’s just have a look at when you might want to use frames.
187
Chapter 6: Frames
59313c06.qxd:WroxPro 3/24/08 11:35 PM Page 187
Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
Figure 6-2
When to Use Frames
It is quite rare to see frames in use these days. Personally, there are very few circumstances in which
I
would suggest that you use frames in a page. The cases in which I think frames are useful include:
❑ When you want to display a lot of content in one single page and you cannot split the document
into separate pages, then a frame might be of use to create a navigation bar that links to the sub-
sections of the long document.
❑
When you have a lot of data in one part of the page that you do not want the user to have to reload
while another part of the page changes. Examples might include a photography site where you have
lots of thumbnails in one frame, and the main picture in another. Rather than reloading the thumb-
nails each time if a visitor wants to look at a new main picture, you can just reload the main picture.
As you have seen in the first example, for each frame you have in a layout, you need to have a file that
acts as its content (each frame is essentially its own web page), so the number of files in your site quickly
grows. You therefore need to be particularly careful with your file structure so that you do not get lost in
a sea of extra files.
A couple of other drawbacks you should be aware of with frames are as follows:
❑ Search engines often link to the content of individual frames rather than the frameset (or group
of frames) that the user sees (and you have to use JavaScript in each frame to reload the frameset
if a visitor lands on an individual frame).
❑ Some browsers do not print well from framesets (and will just print one frame at a time).
❑ The browser’s Back button might not work as the user expects.

rows and cols attributes, the frameset element can also take the following attributes:
class id onload onunload rows style title
Most browsers also support the following well-used attributes (some of which are covered here because
of their popularity). They are not, however, part of the W3C recommendation.
onblur onfocus border bordercolor frameborder framespacing
The cols Attribute
The cols attribute specifies how many columns are contained in the frameset and the size of each column.
You have to provide a value to indicate the width for each of the columns in your frameset, and the
number of values you provide (each separated by a comma) indicates how many columns there are in
the document. For example, here there are three columns: the first takes up 20 percent of the width of the
browser window, the second takes up 60 percent, and the third takes the last 20 percent:
cols=”20%, 60%, 20%”
189
Chapter 6: Frames
59313c06.qxd:WroxPro 3/24/08 11:35 PM Page 189
Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
Because there are three values, the browser knows that there should be three columns.
You can specify the width of each column in one of four ways:
❑ Absolute values in pixels
❑ A percentage of the browser window (or parent frame if you have one frameset sit inside
another — which is known as a nested frame)
❑ Using a wildcard symbol
❑ As relative widths of the browser window (or parent frame)
You can mix and match these different ways of specifying column widths, but note the precedence they
take (discussed after the four methods).
If you do not specify a
cols attribute, then the default value is 100 percent, so if you do not specify a cols
attribute, then there will be one column that takes up 100 percent of the width of the browser.
Absolute Values in Pixels
To specify the width of a column in pixels, you just use a number. (You do not need to use px or any other

the browser window:
cols=”400, *”
If two rows or columns are given the wildcard symbol, then the remaining width is divided by these two
columns.
Relative Widths Between Columns
As an alternative to percentages, you can use relative widths of the browser window, which are best
illustrated with an example. Here, the window is divided into sixths: the first column takes up half of the
window, the second takes one third, and the third takes one sixth:
cols=”3*, 2*, 1*”
You can tell that the window is divided up into sixths by adding up the values of the relative widths.
Value Priorities and Resizing Windows
Absolute widths always take priority over relative widths. Consider the following example with three columns:
cols=”250, *, 250”
If the window is only 510 pixels wide, then the center frame will be only 10 pixels wide. This demonstrates
why you have to be careful when designing frames so that your users will be able to see what you intend
them to see.
Furthermore, if the user resizes his or her window to less than 500 pixels wide, the browser will try to show
as much of the columns defined using absolute widths as possible, ignoring any columns defined using
relative widths.
Whenever a user resizes his or her window, relative widths and percentages are recalculated, but absolute
widths remain the same.
If you specify too many columns for the number of frames you want, the rightmost column ends up being
a blank space; if you specify too many
<frame /> elements the extra ones will be ignored.
The rows Attribute
The rows attribute works just like the cols attribute and can take the same values, but it is used to specify
the rows in the frameset. For example, the following
rows attribute will specify three rows: the top row
191
Chapter 6: Frames

<frameset> element.
The frameborder Attribute
The frameborder attribute specifies whether a three-dimensional border should be displayed between
frames. The following indicates that there should not be any borders (which is the same as if the
border
attribute is given a value of 0):
frameborder=”0”
The table that follows shows possible values for the frameborder attribute.
Figure 6-4 shows what the frames would look like without a border — you cannot see where one frame
ends and another begins — unless you have different images or background colors for the pages in the
frames (
ch06_eg04.html).
Figure 6-4
Value Purpose
1 or yes Indicates borders should be shown, the default value (yes is not part of HTML 4 but
is still supported by common browsers)
0 or no Indicates borders should not be shown (no is not part of HTML 4 but is still supported
by common browsers)
193
Chapter 6: Frames
59313c06.qxd:WroxPro 3/24/08 11:35 PM Page 193
Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
The framespacing Attribute
The framespacing attribute specifies the amount of space between frames in a frameset. The value should
be given in pixels and the default value is 2 if not otherwise specified.
framespacing=”25”
Figure 6-5 shows what the first example from this chapter (shown in Figure 6-1) would look like with a
framespacing attribute indicating a 25-pixel gap between frames (ch06_eg05.html).
Figure 6-5
If you need to make sure that older browsers do not have a border, you should use the border, frameborder

viewer to view just the content of the main frame (as Google does).
The name Attribute
The name attribute allows you to give a name to a frame; it is used to indicate which frame a document
should be loaded into. This is especially important when you want to create links in one frame that load
pages into a second frame, in which case the second frame needs a name to identify itself as the target of
the link. You will see more about making links between frames later in the chapter.
name=”main_frame”
You should note that the name attribute has not been replaced by the id attribute (in the same way that
the
name attribute on some other HTML elements was replaced by the id attribute when XHTML was
introduced as the successor to HTML).
The frameborder Attribute
The frameborder attribute specifies whether or not the borders of that frame are shown; it over-
rides
the value given in the frameborder attribute on the <frameset> element if one is given, and
the possible values are the same. The table that follows shows the possible values of the frameborder
attribute.
195
Chapter 6: Frames
59313c06.qxd:WroxPro 3/24/08 11:35 PM Page 195
Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.