If you define your form control within the label element, as shown in the following code, you can omit the for attribute: User name: The tag doesn't cause any visible changes to the pa
Trang 1<option value="other">Other </option>
</select></td>
</tr>
<tr>
<td valign="top" align="right">Toys:</td>
<td><input type="checkbox" name="toy" value="digicam" /> Digital Camera<br />
<input type="checkbox" name="toy" value="mp3" /> MP3 Player<br />
<input type="checkbox" name="toy" value="wlan" /> Wireless LAN</td>
</tr
<tr>
<td align="right">Portrait:</td>
<td><input type="file" name="portrait" /></td>
</tr>
<tr>
<td valign="top" align="right">Mini Biography:</td>
<td><textarea name="bio" rows="6" cols="40"></textarea></td>
</tr>
<tr>
<td colspan="2" align="right"><input type="submit"
value="register" /></td>
</tr>
</table>
</form>
</body>
</html>
Trang 2Adding Extras
You've created all the form controls that will accept user input Now it's time to add functionality and make the controls a bit friendlier
Displaying Control label Elements
The label element displays helpful information for a form control You should tie the for attribute to the control it labels To create a label, begin with the opening label tag and then enter the for attribute The value for this attribute, when present, must match the id attribute for the control it's labeling Next, enter text that will serve as the label and then close the element with the end label tag, as in the
following:
Input
<label for="control4">Who is your favorite NFL Quarterback?</label>
<input type="text" name="favqb" id="control4" />
Figure 10.16 shows this text control with a label assigned to it
Output
Figure 10.16 You can assign labels to any form control Note that they're
displayed with the control.
If you define your form control within the label element, as shown in the following code, you can omit the for attribute:
<label>User name: <input type="text" name="username" /></label>
The <label> tag doesn't cause any visible changes to the page, but you can always apply styles to it if you want
Trang 3Grouping Controls with fieldset and legend
The fieldset element organizes form controls into groupings that appear in the web browser The
legend element displays a caption for the fieldset To create a fieldset element, start with the opening
fieldset tag, followed by the legend element
Next, enter your form controls and finish things off with the closing fieldset tag:
Input
<fieldset>
<legend>Oatmeal Varieties</legend>
<label>Apple Cinnamon<input type="radio" name="applecinnamon" />
</label><br />
<label>Nutty Crunch<input type="radio" name="nuttycrunch" />
</label><br />
<label>Brown Sugar<input type="radio" name="brownsugar" /></label>
</fieldset>
Figure 10.17 shows the result
Output
forms.
Changing the Default Form Navigation
In most browsers, you can use the Tab key to step through the form fields and links on a page When filling out long forms, it's often much easier to use the Tab key to move from one field to the next than
to use the mouse to change fields If you have a mix of form fields and links on your page, setting things up so that using Tab skips past the links and moves directly from one form field to the next can improve the usability of your applications greatly To set the tab order for your page, use the tabindex
attribute You should number your form fields sequentially to set the order that the browser will use when the user tabs through them Here's an example:
Trang 4<p>Enter your <a href="/">name</a>: <input type="text" name="username"
tabindex="1" /></p>
<p>Enter your <a href="/">age</a>: <input type="text" name="age"
tabindex="2" /></p>
<p><input type="submit" tabindex="3" /></p>
When you tab through this page, the browser will skip past the links and move directly to the form fields
Using Access Keys
Access keys also make your forms easier to navigate They assign a character to an element that moves the focus to that element when the user presses a key To add an access key to a check box, use the following code:
<p>What are your interests?</p>
<p>Sports <input type="checkbox" name="sports" accesskey="S" /></p>
<p>Music <input type=""checkbox" name="music" accesskey="M" /></p>
<p>Television <input type=""checkbox" name="tv" accesskey="T" /></p>
Most browsers require you to hold down a modifier key and the key specified using accesskey to select the field On Windows, both Netscape and Internet Explorer require you to use the Alt key along with the access key to select a field Access keys are mostly useful for forms that will be used frequently by the same users A user who is going to use a form only once won't bother to learn the access keys, but
if you've written a form for data entry, the people who use it hundreds of times a day might really
appreciate the shortcuts
Creating disabled and readonly Controls
Sometimes you might want to display a form control without enabling your visitors to use the control or enter new information To disable a control, add the disabled attribute to the form control:
<p>What is the meaning of life?
<textarea name="question42" disabled="disabled">
Enter your answer here
</textarea>
</p>
When displayed in a web browser, the control will be dimmed (a light shade of gray) to indicate that it's unavailable
To create a read-only control, use the readonly attribute:
Input
<p>This month: <input type="text" name="month" value="September"
readonly="readonly" /></p>
Trang 5The read-only control is not distinguished in any way from a normal form control However, when
visitors attempt to enter new information (or, in the case of buttons or check boxes, select them), they'll find that they cannot change the value Figure 10.18 shows both a disabled control and a read-only
control You'll generally find disabled to be more useful because it's less confusing to your users
Output
Figure 10.18 Disabled controls are dimmed Readonly controls appear
normallythey just can't be changed.
Form Security
It's important to remember that regardless of what you do with your form controls, what
gets sent back to the server when the form is submitted is really up to your user There's
nothing to stop her from copying the source to your form, creating a similar page on her
own, and submitting that to your server If the form uses the get method, the user can just
edit the URL once the form has been submitted
The point here is that there is no form security In Lesson 13, "Using JavaScript in Your
Pages," you'll learn how to validate your forms with JavaScript Even in that case, you can't
guarantee that users will supply the input that you intend What this means is that you
must always validate the data entered by your users on the server before you use it
Trang 6Applying Cascading Style Sheet Properties to Forms
In the previous lesson, I talked about how you can apply style sheets to your pages to jazz up the look and feel or to completely control their structure All the properties that you can apply to paragraphs, divs, and tables can just as easily be applied to forms I'm going to talk about some ways that you can enhance the look and feel of your forms using CSS
As you can see from the screenshots so far today, regular form controls might not blend in too well with your pages The default look and feel of form controls can be altered in just about any way using CSS For example, in most browsers, by default, text input fields use Courier as their font, have white
backgrounds, and beveled borders As you know, border, font, and background-color are all properties that you can modify using CSS In fact, the following example uses all those properties:
Input
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Style Sheet Example</title>
<style type="text/css">
/*<![CDATA[*/
input.styled
{
border: 2px solid #000;
background-color: #aaa;
font: bold 18px Verdana;
padding: 4px;
}
/*]]>*/
</style>
</head>
<body>
<form>
<p>Default: <input value="value" /></p>
<p>Styled: <input value="value" class="styled" /></p>
</form>
</body>
</html>
The page contains two text input fields: one with the default look and feel, and another that's modified using CSS The page containing the form appears in Figure 10.19
Output
Figure 10.19 A regular text input field and a styled text input field.
Trang 7As you can see, the field that we applied styles to is radically different from the one that uses the default decoration You can do anything to regular form fields that you can do to other block-level elements In fact, you can make form fields look just like the rest of your page, with no borders and the same fonts
as your page text if you like Of course, that will make your forms extremely confusing to use, so you probably don't want to do it, but you could
It's also fairly common to modify the buttons on your pages Normally, Submit buttons on forms are gray with beveled edges, or they have the look and feel provided by the user's operating system By applying styles to your buttons, you can better integrate them into your designs This is especially useful
if you need to make your buttons smaller than they are by default I'll provide more examples of style usage in forms in Exercise 10.3
Bear in mind that some browsers support CSS more fully than others So some users won't see the styles that you've applied The nice thing about CSS though is that they'll still see the form fields with the browser's default appearance
Task: Exercise 10.3 Applying Styles to a Form
Let's take another look at the form from Exercise 10.2 The form can easily be spruced up
by tweaking its appearance using CSS The main objectives are to make the appearance of
the controls more consistent, and to make it clear to users which form fields are required
and which are not In the original version of the form, the labels for the required fields
were bold We'll keep with that convention here, and also change the border appearance of
the fields to indicate which fields are required and which aren't
Let's look at the style sheet first We use three classes on the page: required, optional,
and submit First, the required styles Here's that portion of the style sheet:
input.required
{
width: 300px;
font: bold 12px Verdana;
background-color: #6a6;
border: solid 2px #000;
}
select.required
{
width: 300px;
font: bold 12px Verdana;
background-color: #6a6;
Trang 8border: solid 2px #000;
}
td.required
{
font: bold 12px Verdana;
}
Any <input> tags that have their class attribute set to required will be set to 300 pixels of width, and the field will have a 2-pixel black border and a darker green background than is used on the page itself Finally, we set the font to bold 12-pixel Verdana Using the select required selector (for required <select> tags), we set its style to match the required
<input> tags as well The TD.required selector is for table cells that contain labels for required fields
Now let's look at the styles for optional fields Here are the style declarations:
input.optional
{
width: 300px;
font: 12px Verdana;
background-color: #6a6;
border: solid 2px #999;
}
textarea.optional
{
width: 300px;
font: 12px Verdana;
background-color: #6a6;
border: solid 2px #666;
}
td.optional
{
font: 12px Verdana;
}
These styles are almost identical to the styles for the required class The only differences are that the text inside the fields isn't bold and the border is dark gray instead of black Other than those changes, the styles are the same The other style alters the appearance
of the submit button:
input.submit
{
background-color: #6a6;
border: solid 2px #000;
font: bold 12px Verdana;
}
After the style sheet is set up, all we have to do is make sure that the class attributes of our tags are correct The full source code for the page, including the form updated with classes, follows:
Trang 9<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Registration Form</title>
<style type="text/css">
/*<![CDATA[*/
body
{
background-color: #9c9;
}
input.required
{
width: 300px;
font: bold 12px Verdana;
background-color: #6a6;
border: solid 2px #000;
}
select.required
{
width: 300px;
font: bold 12px Verdana;
background-color: #6a6;
border: solid 2px #000;
}
td.required
{
font: bold 12px Verdana;
}
input.optional
{
width: 300px;
font: 12px Verdana;
background-color: #6a6;
border: solid 2px #999;
}
textarea.optional
{
width: 300px;
font: 12px Verdana;
background-color: #6a6;
border: solid 2px #666;
}
td.optional
{
font: 12px Verdana;
}
input.submit
{
Trang 10background-color: #6a6;
border: solid 2px #000;
font: bold 12px Verdana;
}
/*]]>*/
</style>
</head>
<body>
<h1>Registration Form</h1>
<p>Please fill out the form below to register for our site Fields with bold labels are required.</p>
<form action="/cgi-bin/register.cgi" method="post"
enctype="multipart/form-data">
<table>
<tr>
<td align="right" class="required"><b>Name:</b></td>
<td><input name="name" class="required" /></td>
</tr>
<tr>
<td align="right" class="required"><b>Gender:</b></td>
<td class="required"><input type="radio" name="gender"
value="male" /> male <input type="radio" name="gender"
value="female" /> female</td>
</tr>
<tr>
<td align="right" class="required"><b>Operating System:</b></td>
<td><select name="os" class="required">
<option value="windows">Windows</option>
<option value="macos">Mac OS</option>
<option value="linux">Linux</option>
<option value="other">Other </option>
</select></td>
</tr>
<tr>
<td valign="top" align="right" class="optional">Toys:</td>
<td class="optional"><input type="checkbox" name="toy"
value="digicam" /> Digital Camera<br />
<input type="checkbox" name="toy" value="mp3" /> MP3 Player<br />
<input type="checkbox" name="toy" value="wlan" /> Wireless LAN</td>
</tr>
<tr>
<td align="right" class="optional">Portrait:</td>
<td><input type="file" name="portrait" /></td>
</tr>
<tr>
<td valign="top" align="right" class="optional">Mini
Biography:</td>
<td><textarea name="bio" rows="6" cols="40"
class="optional"></textarea></td>
</tr>
<tr>