Creating Websites : Working With Forms

Forms
Filling out forms online is a great way to glean information from your visitors or provide enhanced
service to them. Although the scripts that actually receive and process such form data are beyond the
scope of this book, we’ll next discuss how some of the various form elements work in XHTML markup.
The first thing you’ll need in any form you create is the <form> element:
<form>
</form>
<form> elements accept many attributes, but only one, the action attribute, is required. The action
attribute is similar to the href attribute in the <a> element. It specifies a particular URL where the
script that processes the form data can be found. Let’s set your example form to be processed at
/path/to/script:
<form action="/path/to/script">
</form>
When this form is submitted, it will send the browser to the /path/to/script page along with all the
data from your form. Right now, however, there’s no data to be sent because you haven’t defined any
fields to fill in. So, let’s add some fields to this form.
A <form> element is a lot like a <blockquote> in the sense that it can have only certain child elements.
For simple forms, you can use the <p> or <div> elements that you’ve already seen used before, and
you can place all the form’s controls into these elements. However, since you’re about to build a relatively
complex form, you’ll use the XHTML element specifically designed to group form controls into
groups: the <fieldset> element.
The <fieldset> element, which (as you might expect) defines a set of related form fields, is a lot like
the <div> element. Both elements are used to group related elements together in a single chunk of
code. Unlike <div>s, however, <fieldset> elements can contain a special element, called legend, that
gives the <fieldset> element a name that is visible to your web page’s visitors. You might do well to
think of this element in the same way you might think of the <caption> element for tables.
With the <fieldset> element and its legend in your form, your markup now looks like this:
<form action="/path/to/script">
<fieldset>
<legend>Personal Information</legend>
</fieldset>
</form>

The most common kind of form field is a simple text field where users can type something. These, and
most other kinds of form fields, are added to forms by defining <input> elements. Form <input> elements
can be of a number of different types, such as text fields, check boxes, or radio buttons. The
kind of form control any particular <input> element becomes is specified by the value of its type
attribute.
If a type attribute isn’t specified, the default of type="text" is inferred. For example, this is how you
might ask for the visitor’s e-mail address using a text input field inside your form:
<form action="/path/to/script">
<fieldset>
<legend>Personal Information</legend>
<input type="text" name="email" />
</fieldset>
</form>
There are two things you should notice about the <input> element used here. First, it’s an empty element,
like an <img>. Second, you’ve also included an attribute called name, and you’ve given it a value
of email. All form elements that need to provide some data to processing scripts need to have a name
attribute with a value. This is the name that the processing script will use to refer to the data in this
<form> element after the form has been submitted. If you don’t provide a name, then the processing
script won’t be able to see any of the data in the form element.
A form like the one in the previous code listing might look like Figure 4-10 in a web browser.

Figure 4-10. A very simple form
example using a field set and a
single text input box




You can see that the name attribute isn’t displayed anywhere (nor should it be), so there’s currently no
easy way for the visitor to know what they’re expected to type into that text field. To give the text field
a name that human visitors can use to refer to it, you have to use the <label> element.
You can place <label> elements anywhere in the form—they don’t have to appear right next to the
input field that they label. For this reason, each <label> element needs to be uniquely associated with
an input field in some way other than proximity. You’ve already learned how to uniquely identify elements
on a web page using the id attribute, so let’s first uniquely identify this form field with the
name email_field:
<input type="text" name="email" id="email_field" />
Now that you have a unique identifier to refer to this input field with, you can add the <label> element
to your form. You’ll add it directly in front of the <input> element for simplicity’s sake, but
again, you technically could have placed it anywhere inside the <form> element. When using a
<label> element, the text inside the element should describe the field that the element labels (like
the anchor text does for links), and the value of the for attribute should match the id of the field
being labeled. In code, that might look something like this:


<label for="email_field">Email Address</label>
<input type="text" name="email" id="email_field" />
If you look at this in a browser window, you see that you now have something usable by a visitor (see
Figure 4-11).

Figure 4-11. We’ve added a label here so
that the user actually knows what’s being
requested (an e-mail address).

Another possible type value for the <input> element is checkbox. A check box is a simple “yes or no”

input, and it is nearly the same as the text field’s <input> element in code. Let’s use a check box to ask

somebody whether they are currently enrolled in a college or university. You’ll simply add the check

box and all its attributes, as well as a descriptive label for what your check box is asking, after the text

field for the visitor’s e-mail address:

<form action="/path/to/script">

<fieldset>

<legend>Personal Information</legend>

<label for="email_field">Email Address</label>

<input type="text" name="email" id="email_field" />

<input type="checkbox" name="enrolled" id="enrolled_field" å

value="1" />

<label for="enrolled_field">I am currently enrolled in a

college or university</label>

</fieldset>

</form>

One of the attributes you’ve added to the check box is the value attribute (careful, this is an attribute

named value). The value of the value attribute will be sent to the processing script only if the box is

checked. Here you’ve used 1, a simple approach to indicate that “yes, this box was checked on the

form.”

Now that you’ve added the check box and its appropriate label, take a look in the browser to see how

that would look (see Figure 4-12).

Figure 4-12. The revised form with a check box added



It’s certainly a start. Next, you’d probably need some way to separate these elements so the browser
knows to show them on different lines. If you think about it, what you’re beginning to create is a list
of inputs for the user to fill out. In this case, these inputs are in a particular order. It sounds like an
ordered list fits this scenario perfectly. Let’s nest the inputs and labels in list items and nest the list
items in an ordered list element:

<form action="/path/to/script">
<fieldset>
<legend>Personal Information</legend>
<ol>
<li>
<label for="email_field">Email Address</label>
<input type="text" name="email" id="email_field" />
</li>
<li>
<input type="checkbox" name="enrolled" å
id="enrolled_field" value="1" />
<label for="enrolled_field">I am currently
enrolled in a college or university</label>
</li>
</ol>
</fieldset>
</form>
There’s one other attribute that you can use for a check box, should you want it to be checked when
the visitor first loads the form. In this case, perhaps a majority of your visitors will be enrolled in some
college or university. All you need to do to make this happen is specify a checked attribute with a
value of checked. (That’s not a typo. The name of the attribute and the value it expects is supposed to
be the same.) The visitor can still uncheck the box, but in some situations it might prove easier to have
the field checked in the first place. Let’s see the markup for the check box when it’s checked by
default.
<input type="checkbox" name="enrolled" id="enrolled_field"
value="1" checked="checked" />
<label for="enrolled_field">I am currently enrolled in a
college or university</label>
Another input type that XHTML forms permit you to use are radio buttons. A radio button is similar to
a check box except there are multiple options from which a user can choose, and only one can ultimately
be selected. Radio buttons are thus almost always found in sets that ask the user to select one
of a small number of items.
Each radio button is represented as an <input> element with its type set to radio. You associate multiple
radio buttons as belonging to the same set by giving each one the same value in its name attribute.
Each radio button’s value attribute, however, should be unique among the radio buttons in the
set. Like check boxes, each radio button needs a label, so each radio button’s id attribute should also
be unique (in the entire document, not just the set of radio buttons or even just the <form> element
they’re in).
To put this into the example, let’s ask the visitor their favorite color. You’ll give them four colors to
select from: blue, red, yellow, and green. While marking up this question for your form, you can
immediately notice that you have yet another list. This time, though, the items are not in any particular
order, so you’ll use an unordered list.

You will also need to introduce the question, because now your <label> elements are labeling the
actual choices instead of the question at hand. You’ll simply do that with some text before you start
the unordered list.
<form action="/path/to/script">
<fieldset>
<legend>Personal Information</legend>
<ol>
<li>
<label for="email_field">Email Address</label>
<input type="text" name="email" id="email_field" />
</li>
<li>
<input type="checkbox" name="enrolled" å
id="enrolled_field" value="1" å
checked="checked" />
<label for="enrolled_field">I am currently enrolled in
a college or university</label>
</li>
<li>What is your favorite color?
<ul>
<li>
<input type="radio" name="favorite_color"
id="favorite_color_blue" value="blue" />
<label for="favorite_color_blue">Blue</label>
</li>
<li>
<input type="radio" name="favorite_color"
id="favorite_color_red" value="red" />
<label for="favorite_color_red">Red</label>
</li>
<li>
<input type="radio" name="favorite_color"
id="favorite_color_yellow" value="yellow" />
<label for="favorite_color_yellow">Yellow
</label>
</li>
<li>
<input type="radio" name="favorite_color"
id="favorite_color_green" value="green" />
<label for="favorite_color_green">Green</label>
</li>
</ul>
</li>
</ol>
</fieldset>
</form>
Looking at the browser again, you can see that your form is working as expected (see Figure 4-13).

Next, let’s add two more form fields asking for input from your web page’s visitors. For these last two
datum, let’s ask for your visitor’s time zone and provide a free-form area in which they can type whatever
text they like. Since these two items are somewhat unrelated to the previous three questions,
let’s group them separately from the previous form items by using a new <fieldset> element.
To let the visitor select their time zone, you could display a set of radio buttons in a list just as you’ve
done for their favorite color. However, radio buttons take up a lot of space. Furthermore, there are
dozens of time zones in the world. If you used radio buttons again, your form would be gigantic.
Instead, let’s use a different form control that XHTML makes available: a drop-down list. This control
is defined by the <select> element and the <option> element in tandem, much like a regular ordered
or unordered list.
<label for="timezone_field">Time zone</label>
<select name="timezone" id="timezone_field">
<option>-5</option>
<option>-6</option>
<option>-7</option>
<option>-8</option>
</select>
With this markup, the user is given four options to select their time zone from: –5, –6, –7, or –8. These
are actually the number of hours offset from UTC time of the eastern United States through to the
Pacific coast. It’s how computers most often tell time (by keeping track of everything in UTC time and
then calculating offsets per time zone), but it’s not how people think of their time zones. So, using the
value attribute for each option element, let’s give the computers what they expect and show the
human visitors values that are more comfortable for them to read:
<label for="timezone_field">Time zone</label>
<select name="timezone" id="timezone_field">
<option value="-5">Eastern</option>
<option value="-6">Central</option>
<option value="-7">Mountain</option>
<option value="-8">Pacific</option>
</select>

Now, when the user selects Eastern as their time zone, the processing script that sees this form will see
the value –5.
You can place as many <option> elements inside <select> elements as you like. However, when there
are a lot of options, or the options are representative of different categories, it makes sense to group
these options. For that, you use the <optgroup> element, just as if you were using <div> or
<fieldset>. Let’s add more time zones to your list, but let’s organize them inside <optgroup>
elements so that the categorization is clearly obvious:
<label for="timezone_field">Time zone</label>
<select name="timezone" id="timezone_field">
<optgroup label="Mainland America">
<option value="-5">Eastern</option>
<option value="-6">Central</option>
<option value="-7">Mountain</option>
<option value="-8">Pacific</option>
</optgroup>
<optgroup label="Outlying States">
<option value=”-9”>Alaskan</option>
<option value=”-10”>Hawaiian</option>
</optgroup>
</select>
Notice that here inside the <optgroup> element you’re using a label attribute to give a name to your
group of <option> elements. Be careful not to confuse this with the <label> element used to label
the entire <select> element.
As a final touch, let’s add that free-form area of text where you encourage your visitors to send you
their comments. This is accomplished with a <textarea> element and is one of the simplest form controls
to use. It has just two differences. First, unlike most of the other form controls you’ve seen, the
<textarea> element does not need a value attribute because its content becomes its value. Second,
it requires two new attributes, rows and cols, to indicate its default height and width, respectively.
(This sizing can later be overridden with CSS.) A <textarea>’s markup might look like this:
<label for="comments_field">Comments</label>
<textarea name="comments" id="comments_field" rows="6"
cols="65"></textarea>
At long last you have your form controls all set up to collect input from the user. There’s only one
thing you’re missing: a way for the visitor to actually submit the form to the processing script. For that,
you need to use one more type of <input> element: the submit type. This type of <input> element
will create a button that the user can activate that submits the form.
Typically, when using elements that create form controls that operate on the form (such as a submit
button), you can skip specifying a label for that element since the form control itself effectively serves
that purpose. Since you’re not using a <label> element for your submit button, you don’t have to use
an id attribute either, so your element is really quite simple.
<input type="submit" value="Submit this Form" />

Now your visitors will be able to click the Submit this Form button to send the form to the processing
script.
With the markup shown in the next code listing, you have a fully functional form in the web page. The
user can provide input using the form controls you’ve defined and can submit the form, which will
pass the values of the <form> elements to the processing script.
When viewing the web page, your form will now look something like what is shown in Figure 4-14.
<form action="/path/to/script">
<fieldset>
<legend>Personal Information</legend>
<ol>
<li>
<label for="email_field">Email Address</label>
<input type="text" name="email" id="email_field" />
</li>
<li>
<input type="checkbox" name="enrolled" å
id="enrolled_field" value="1" å
checked="checked" />
<label for="enrolled_field">I am currently enrolled in
a college or university</label>
</li>
<li>What is your favorite color?
<ul>
<li>
<input type="radio" name="favorite_color" å
id="favorite_color_blue" value="blue" />
<label for="favorite_color_blue">Blue</label>
</li>
<li>
<input type="radio" name="favorite_color" å
id="favorite_color_red" value="red" />
<label for="favorite_color_red">Red</label>
</li>
<li>
<input type="radio" name="favorite_color" å
id="favorite_color_yellow" value="yellow" />
<label for="favorite_color_yellow">Yellow
</label>
</li>
<li>
<input type="radio" name="favorite_color" å
id="favorite_color_green" value="green" />
<label for="favorite_color_green">Green</label>
</li>
</ul>
</li>
</ol>

</fieldset>
<fieldset>
<legend>Application Information</legend>
<ol>
<li>
<label for="timezone_field">Time zone</label>
<select name="timezone" id="timezone_field">
<optgroup label="Mainland America">
<option value="-5">Eastern</option>
<option value="-6">Central</option>
<option value="-7">Mountain</option>
<option value="-8">Pacific</option>
</optgroup>
<optgroup label="Outlying States">
<option value="-9">Alaskan</option>
<option value="-10">Hawaiian</option>
</optgroup>
</select>
</li>
<li>
<label for="comments_field">Comments</label>
<textarea name="comments" id="comments_field" å
rows="6" cols="65"></textarea>
</li>
</ol>
</fieldset>
<input type="submit" value="Submit this Form" />
</form>

Of course, there’s even more you can do with XHTML forms. For instance, there are a few more

options for the type attribute that you can specify on <input> elements. An important one to know

about is the password type, which creates an element that is identical to the text type except that it

renders every character that the user types into it as asterisks (*) or bullets (•) instead of actual text.

The text that’s typed is, in fact, unchanged, but it doesn’t show up on screen that way for security purposes.

There’s also the file type, which allows the visitor to select a file from their computer to

upload through the form using their operating system’s native file selection dialog box.

There are also a few more kinds of buttons that are similar to the submit type of input. There’s a

button type that displays a button whose behavior you can control through JavaScript, though it won’t

do anything at all by default. There’s also a button element, which can be used to turn certain other

elements (such as an <img>) into a button. (These kinds of buttons will, by default, submit the form.)

There’s also the image type of <input> element, which is another way to turn an image into a button,

and it takes a src attribute just like the <img> tag.

Finally, there’s also a reset type of the <input> element that also creates a button, only instead of

submitting the form, this kind of button will put the form in its original state, removing any input the

user may have entered. There’s rarely any real need for this kind of button (especially on longer

forms), but it’s there if you ever do need it.

As you can see, designing forms can be quite an undertaking on the Web. They introduce a kind of

interactivity that you can’t get from other kinds of media like television or magazines. Forms, and the

capabilities they provide to enable two-way communication between the website creator and the

website visitor, are what makes the Web a truly unique publishing platform.