In this section, we’ll work through how to create a form and add controls. We’ll also look
at how to improve form accessibility by using the tabindex attribute, and the label,
fieldset, and legend elements.
As suggested earlier in the chapter, the best way of getting user feedback is through an
online form that the user fills in and submits. Fields are configured by the designer,
enabling the site owner to receive specific information. However, don’t go overboard: provide
users with a massive, sprawling online form and they will most likely not bother filling
it in, and will go elsewhere.
Similarly, although you can use JavaScript to make certain form fields required, I’m not a
fan of this technique, because it annoys users. Some sites go overboard on this, “forcing”
users to input a whole bunch of details, some of which may simply not be applicable to the
user. In such cases, users will likely either go elsewhere or insert fake data, which helps
no one.
So, keep things simple and use the fewest fields possible. In the vast majority of cases, you
should be able to simply create name, e-mail address, and phone number fields, and
include a text area that enables users to input their query.
at how to improve form accessibility by using the tabindex attribute, and the label,
fieldset, and legend elements.
As suggested earlier in the chapter, the best way of getting user feedback is through an
online form that the user fills in and submits. Fields are configured by the designer,
enabling the site owner to receive specific information. However, don’t go overboard: provide
users with a massive, sprawling online form and they will most likely not bother filling
it in, and will go elsewhere.
Similarly, although you can use JavaScript to make certain form fields required, I’m not a
fan of this technique, because it annoys users. Some sites go overboard on this, “forcing”
users to input a whole bunch of details, some of which may simply not be applicable to the
user. In such cases, users will likely either go elsewhere or insert fake data, which helps
no one.
So, keep things simple and use the fewest fields possible. In the vast majority of cases, you
should be able to simply create name, e-mail address, and phone number fields, and
include a text area that enables users to input their query.
Creating a form
Form controls are housed within a form element, whose attributes also determine the
location of the script used to parse it (see the “Sending feedback” section later in the
chapter). Other attributes define the encoding type used and the method by which the
browser sends the form’s data to the server. A typical start tag for a form therefore looks
like this:
<form action="http://www.yourdomain.com/cgi-bin/FormMail.cgi"
å method="post">
location of the script used to parse it (see the “Sending feedback” section later in the
chapter). Other attributes define the encoding type used and the method by which the
browser sends the form’s data to the server. A typical start tag for a form therefore looks
like this:
<form action="http://www.yourdomain.com/cgi-bin/FormMail.cgi"
å method="post">
Adding controls
Some form controls are added using the input element. The type attribute declares what
kind of control the element is going to be. The most common values are text, which produces
a single-line text input field; checkbox and radio, which are used for multiplechoice
options; and submit, which is used for the all-important Submit button.
Other useful elements include select, option, and optgroup, used for creating pop-up
lists, and textarea, which provides a means for the user to offer a multiple-line response
(this is commonly used in online forms for a question area). The basic HTML for a form
may therefore look like the following, producing the page depicted in the following screen
grab.
<form action="http://www.yourdomain.com/cgi-bin/FormMail.cgi"
å method="post">
<p><strong>Name</strong><br />
<input type="text" name="realname" size="30" /></p>
<p><strong>Email address</strong><br />
<input type="text" name="email" size="30" /></p>
<p><strong>Telephone</strong><br />
<input type="text" name="phone" size="30" /></p>
<p><strong>Are you a Web designer?</strong><br />
<input type="radio" name="designer" value="yes" />Yes |
å <input type="radio" name="designer" value="no" />No</p>
<p>What platform do you favor?<br />
<select name="platform">
<option selected="selected">Windows</option>
<option>Mac</option>
<option>Linux</option>
<option>Other</option>
</select></p>
<p><strong>Message</strong><br />
<textarea name="message" rows="5" cols="30"></textarea></p>
<p><input type="submit" name="SUBMIT" value="SUBMIT" /></p>
</form>
The bulk of the HTML is pretty straightforward. In each case, the name attribute value
labels the control, meaning that you end up with the likes of Telephone: 555 555 555 in
your form results, rather than just a bunch of answers. For multiple-option controls (check
boxes and radio buttons), this attribute is identical, and an individual value attribute is set
in each start tag.
By default, controls of this type—along with the select list—are set to off (i.e., no values
selected), but you can define a default option. I’ve done this for the select list by setting
selected="selected" on the Windows option. You’d do the same on a radio button
to select it by default, and with a check box you’d set checked="checked".
Some of the attributes define the appearance of controls: the input element’s size attribute
sets a character width for the fields, while the textarea’s rows and cols attributes set
the number of rows and columns, again in terms of characters. It’s also worth noting that
any content within the textarea element is displayed, so if you want it to start totally
blank, you must ensure that there’s nothing—not even whitespace—between the start and
end tags. (Some applications that reformat your code, and some website editors, place
whitespace here, which some browsers subsequently use as the default value/content of
the textarea. This results in the textarea’s content being partially filled with spaces, and
anyone trying to use it may then find their cursor’s initial entry point partway down the
text area, which can be off-putting.)Long-time web users may have noticed the omission of a Reset button in this example.
This button used to be common online, enabling the user to reset a form to its default
state, removing any content they’ve added. However, I’ve never really seen the point in
having it there, especially seeing as it’s easy to click by mistake, resulting in the user having
to fill in the form again, hence its absence from the examples in this chapter. However,
if you want to add such a button, you can do so by using the following code:
<input type="reset" name="RESET" value="RESET" />
<p><strong>Message</strong><br />
<textarea name="message" rows="5" cols="30"></textarea></p>
<p><input type="submit" name="SUBMIT" value="SUBMIT" /></p>
</form>
The bulk of the HTML is pretty straightforward. In each case, the name attribute value
labels the control, meaning that you end up with the likes of Telephone: 555 555 555 in
your form results, rather than just a bunch of answers. For multiple-option controls (check
boxes and radio buttons), this attribute is identical, and an individual value attribute is set
in each start tag.
By default, controls of this type—along with the select list—are set to off (i.e., no values
selected), but you can define a default option. I’ve done this for the select list by setting
selected="selected" on the Windows option. You’d do the same on a radio button
to select it by default, and with a check box you’d set checked="checked".
Some of the attributes define the appearance of controls: the input element’s size attribute
sets a character width for the fields, while the textarea’s rows and cols attributes set
the number of rows and columns, again in terms of characters. It’s also worth noting that
any content within the textarea element is displayed, so if you want it to start totally
blank, you must ensure that there’s nothing—not even whitespace—between the start and
end tags. (Some applications that reformat your code, and some website editors, place
whitespace here, which some browsers subsequently use as the default value/content of
the textarea. This results in the textarea’s content being partially filled with spaces, and
anyone trying to use it may then find their cursor’s initial entry point partway down the
text area, which can be off-putting.)Long-time web users may have noticed the omission of a Reset button in this example.
This button used to be common online, enabling the user to reset a form to its default
state, removing any content they’ve added. However, I’ve never really seen the point in
having it there, especially seeing as it’s easy to click by mistake, resulting in the user having
to fill in the form again, hence its absence from the examples in this chapter. However,
if you want to add such a button, you can do so by using the following code:
<input type="reset" name="RESET" value="RESET" />
Improving form accessibility
Although there’s an onscreen visual relationship between form label text and the controls,
they’re not associated in any other way. This sometimes makes forms tricky to use for
those people using screen readers and other assistive devices. Also, by default, the Tab key
cycles through various web page elements in order, rather than jumping to the first form
field (and continuing through the remainder of the form before moving elsewhere). Both
of these issues are dealt with in this section.
they’re not associated in any other way. This sometimes makes forms tricky to use for
those people using screen readers and other assistive devices. Also, by default, the Tab key
cycles through various web page elements in order, rather than jumping to the first form
field (and continuing through the remainder of the form before moving elsewhere). Both
of these issues are dealt with in this section.
The label, fieldset, and legend elements
The label element enables you to define relationships between the text labeling a form
control and the form control itself. In the following example, the Name text is enclosed in a
label element with the for attribute value of realname. This corresponds to the name and
id values of the form field associated with this text.
<p><label for="realname">Name</label><br />
<input type="text" name="realname" id="realname" size="30" /></p>
Most browsers don’t amend the content’s visual display when it’s nested within a label
element, although you can style the label in CSS. However, most apply an important
accessibility benefit: if you click the label, it gives focus to the corresponding form control
(in other words, it selects the form control related to the label). Note that the id attribute—
absent from the form example earlier in the chapter—is required for this. If it’s
absent, clicking the text within the label element won’t cause the browser to do anything.
The fieldset element enables you to group a set of related form controls to which you
apply a label via the legend element.
<fieldset>
<legend>Personal information</legend>
<p><label for="realname">Name</label><br />
<input type="text" id="realname" name="realname" size="30" /></p>
<p><label for="email">Email address</label><br />
<input type="text" id="email" name="email" size="30" /></p>
<p><label for="phone">Telephone</label><br />
<input type="text" id="phone" name="phone" size="30" /></p>
</fieldset>
As you can see from the previous screenshot, these elements combine to surround the relevant
form fields and labels with a border and provide the group with an explanatory title.
form fields and labels with a border and provide the group with an explanatory title.
Adding tabindex attributes
The tabindex,used to define the page’s element tab order, and its
value can be set as anything from 0 to 32767. Because the tabindex values needn’t be
sequential, it’s advisable to set them in increments of ten, enabling you to insert others
later, without having to rework every value on the page. With that in mind, you could
set tabindex="10" on the realname field, tabindex="20" on the email field, and
tabindex="30" on the phone field (these field names are based on their id/name values
from the previous example). Assuming no other tabindex attributes with lower values are
elsewhere on the page, the realname field becomes the first element highlighted when the
Tab key is pressed, and then the cycle continues (in order) with the email and phone fields.
Note that whenever using tabindex, you run the risk of hijacking the mouse cursor, meaning
that instead of the Tab key moving the user from the first form field to the second, it
might end up highlighting something totally different, elsewhere on the page. What’s logical
to some people in terms of tab order may not be to others, so always ensure you test
your websites thoroughly, responding to feedback. Generally, it makes sense to use the
value only for form fields, and then with plenty of care.
