Just as I did in the login form example earlier, I’ve added a left margin for the Submit button so that it lines up with the other fields.. After some introduc-tory text, we open the for
Trang 1Looking at the style sheet, you should get some idea of how the form will be laid out
Each field will be in its own <div>and I’ve added a margin to the bottom of each of
them Just as I did in the login form example earlier, I’ve added a left margin for the
Submit button so that it lines up with the other fields Most of the styling has to do with
the labels
In this form, I am using labels in two ways—first to create a left column of labels for the
form, and second to add clickable labels to the radio buttons and check boxes To
distin-guish between them, I’m using a class called field, which I apply to the field-level
labels I’ve also got a class called requiredthat will be used with labels on required
fields
Now that you’ve seen the styles, let’s look at the body of the page After some
introduc-tory text, we open the form like this:
<form action=“/register” method=“post”
enctype=“multipart/form-data”>
Because this form contains a file upload field, we have to use the postmethod and the
multipart/form-data enctypein the <form>tag The actionattribute points to a CGI
script that lives on my server Next, we start adding form inputs Here’s the nameinput:
<div>
<label class=”required field” for=”name”>Name</label>
<input name=”name” />
</div>
All the inputs will follow this basic pattern The input and its label are nested within a
<div> In this case, the label has the classes fieldandrequired The only attribute
included in the input tag is the field name because the default values for the rest of the
attributes are fine Next is the gender field, which uses two radio buttons:
<div>
<label class=”required field”>Gender</label>
<label><input type=”radio” name=”gender” value=”male” />
male</label>
<label><input type=”radio” name=”gender” value=”female” />
female</label>
</div>
As you can see, the radio button group includes two controls (both with the same name,
establishing the group) Because we didn’t include line breaks between the two fields,
they appear side by side in the form Here’s an instance where I used the <label>tag
two different ways In the first case, I used it to label the field as a whole, and then I used
Trang 2individual labels for each button The individual labels allow you to select the radio
but-tons by clicking their labels As you can see, I used the approach of putting the <input>
tags inside the <label>tags to associate them
The next field is a select list that enables the user to indicate which operating system he
runs on his computer:
<div>
<label class=”required field”>Operating System</label>
<select name=”os”>
<option value=”windows”>Windows</option>
<option value=”macos”>Mac OS</option>
<option value=”linux”>Linux</option>
<option value=”other”>Other </option>
</select>
</div>
This select list is a single-line, single-select field with four options Instead of using the
display values as the values that will be sent back to the server, we opt to set them
specifically using the valueattribute of the <option>tag The next form field is a check
box group:
<div>
<label class=”field”>Toys</label>
<label><input type=”checkbox” name=”toy” value=”digicam” /> Digital
Camera</label>
<label><input type=”checkbox” name=”toy” value=”mp3” /> MP3
Player</label>
<label><input type=”checkbox” name=”toy” value=”wlan” /> Wireless
LAN</label>
</div>
As you can see, we use labels for each of the individual check boxes here, too The next
field is a file upload field:
<div>
<label class=”field”>Portrait</label>
<input type=”file” name=”portrait” />
</div>
The last input field on the form is a text area intended for the user’s bio
<div>
<label class=”field”>Mini Biography</label>
<textarea name=”bio” rows=”6” cols=”40”></textarea>
</div>
11
Trang 3After the text area, there’s just the Submit button for the form After that, it’s all closing
tags for the <form>tag,<body>tag, and the <html>tag The full source code for the
page follows, along with a screenshot of the form, as shown earlier in Figure 11.16
Input▼
<!DOCTYPE html>
<html>
<head>
<title>Registration Form</title>
<style type=”text/css” media=”screen”>
form div {
margin-bottom: 1em;
} div.submit input {
margin-left: 165px;
} label.field {
display: block;
float: left;
margin-right: 15px;
width: 150px;
text-align: right;
} label.required {
font-weight: bold;
}
</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=”/register” method=”post” enctype=”multipart/form-data”>
<div>
<label class=”required field” for=”name”>Name</label>
<input name=”name” />
</div>
<div>
<label class=”required field”>Gender</label>
<label><input type=”radio” name=”gender” value=”male” />
Trang 4male</label>
<label><input type=”radio” name=”gender” value=”female” />
female</label>
</div>
<div>
<label class=”required field”>Operating System</label>
<select name=”os”>
<option value=”windows”>Windows</option>
<option value=”macos”>Mac OS</option>
<option value=”linux”>Linux</option>
<option value=”other”>Other </option>
</select>
</div>
<div>
<label class=”field”>Toys</label>
<label><input type=”checkbox” name=”toy” value=”digicam” />
Digital Camera</label>
<label><input type=”checkbox” name=”toy” value=”mp3” /> MP3 Player</label>
<label><input type=”checkbox” name=”toy” value=”wlan” />
Wireless LAN</label>
</div>
<div>
<label class=”field”>Portrait</label>
<input type=”file” name=”portrait” />
</div>
<div>
<label class=”field”>Mini Biography</label>
<textarea name=”bio” rows=”6” cols=”40”></textarea>
</div>
<div class=”submit”>
<input type=”submit” value=”register” />
</div>
</form>
</body>
</html>
11
▲
Trang 5Grouping Controls with fieldset and
legend
Thefieldsetelement organizes form controls into groupings that appear in the web
browser The legendelement displays a caption for the fieldset To create a fieldset
element, start with the opening fieldsettag, followed by the legendelement
Next, enter your form controls and finish things off with the closing fieldsettag:
Input▼
<fieldset>
<legend>Oatmeal Varieties</legend>
<label><input type=“radio” name=“applecinnamon” /> Apple Cinnamon</label>
<label><input type=“radio” name=“nuttycrunch” /> Nutty Crunch
</label>
<label><input type=“radio” name=“brownsugar” /> Brown Sugar</label>
</fieldset>
Figure 11.17 shows the result
Output
FIGURE 11.17
Thefieldsetand
legendelements
enable you to
organize your
forms.
The presentation of the fieldsetin Figure 11.17 is the default, but you can use CSS to
stylefieldsetelements in any way that you like A fieldsetis a standard block level
element, so you can turn off the borders using the style border: noneand use them as
you would <div>tags to group inputs in your forms
One thing to watch out for with the <legend>tag is that it’s a little less flexible than the
<label>tag in terms of how you’re allowed to style it It’s also not handled consistently
between browsers If you want to apply a caption to a set of form fields, use <legend>
but be aware that complex styles may have surprising results Figure 11.18 shows the
markup from Figure 11.17 with some the following styles applied:
Trang 6Input▼
<style type=”text/css” media=”screen”>
fieldset {
border: none;
background-color: #aaa;
width: 400px;
}
legend {
text-align: right;
}
</style>
11
Output
FIGURE 11.18
A fieldset and
leg-end with styles
applied.
As you can see, I’ve changed the background color of the field set and assigned a
spe-cific width I’ve also aligned the legend to the right Because of the default browser
posi-tioning of the legend, the background color splits the legend text This is an example of
how browsers treat legends uniquely To set a background for the field set that includes
the full legend, I’d have to wrap the field set in another block level element (like a div),
and apply the background color to that
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 tabindexattribute
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:
<p><label>Enter your <a href=”/”>name</a> <input type=”text” name=”username”
tabindex=”1” /></label></p>
<p><label>Enter your <a href=”/”>age</a> <input type=”text” name=”age”
tabindex=”2” /></label></p>
Trang 7When 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
ele-ment that moves the focus to that eleele-ment 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>
<label>Sports <input type=”checkbox” name=”sports” accesskey=”S” /></label>
<label>Music <input type=””checkbox” name=”music” accesskey=”M” /></label>
<label>Television <input type=””checkbox” name=”tv” accesskey=”T” /></label>
Most browsers require you to hold down a modifier key and the key specified using
accesskeyto select the field On Windows, both Firefox 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
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 disabledattribute
to the form control:
<label for=”question42”>What is the meaning of life?</label>
<textarea name=“question42” disabled=“disabled”>
Enter your answer here.
</textarea>
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 readonlyattribute:
Input▼
<label>This month</label> <input type=“text” name=“month” value=“September”
readonly=“readonly” />
Trang 8The 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 11.19
shows both a disabled control and a read-only control You’ll generally find disabledto
be more useful because it’s less confusing to your users
11
Output
FIGURE 11.19
Disabled controls
are dimmed
Read-only controls
appear normally—
they 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 when the form has been submitted.
The point here is that there is no form security In Lesson 15, “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.
Applying Cascading Style Sheet
Properties to Form Elements
In this lesson, I’ve already showed you some approaches you can take to managing the
layout of your forms with CSS Now I explain how to alter the appearance of form input
fields themselves using style properties As you can see from the screenshots so far,
reg-ular 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 many
browsers, by default, text input fields use Courier as their font, have white backgrounds,
Trang 9and beveled borders As you know, border,font, and background-colorare all
ties that you can modify using CSS In fact, the following example uses all those
proper-ties:
Input▼
<!DOCTYPE html>
<html>
<head>
<title>Style Sheet Example</title>
<style type=”text/css”>
input.styled {
border: 2px solid #000;
background-color: #aaa;
font: bold 18px Verdana;
padding: 4px;
}
</style>
</head>
<body>
<form>
<p><label>Default</label> <input value=”value” /></p>
<p><label>Styled</label> <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 11.20
Output
FIGURE 11.20
A regular text input
field and a styled
text input field.
As 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
Trang 1011
▼
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 provide more examples of style usage in forms in Exercise 11.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 11.3: Applying Styles to a Form
Let’s take another look at the form from Exercise 11.2 The form can easily be further
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 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 This style sheet is similar to the one in Exercise 11.2, but I
have made some changes First, three styles that I copied directly from the previous
exer-cise:
form div {
margin-bottom: 1em;
}
div.submit input {
margin-left: 165px;
}
label.field {
display: block;
float: left;
margin-right: 15px;
width: 150px;
text-align: right;