|
If you find that the label for an input element is displayed too close to the element, just add a space between the close of the
<input />
tag and the start of the label text, like this:
<input type="checkbox" name="mini" /> Mini Piano Stool
|
The check box labeled Baby Grand Piano is checked in this example. (The user would have to click it to turn it off if he didn't want a piano.) The one
marked
Mini Piano Stool would be unchecked to begin with, so the user would have to click it to
turn
it on.
When the form is submitted, selected check boxes appear in the form result:
baby=on
Blank (
deselected
) check boxes do not appear in the form output at all.
|
XHTML requires all attributes to have an equal sign followed by a value. This explains why I've used
checked="checked"
to
indicate
that a check box is checked, as opposed to just
checked
. This rule applies to all Boolean (
TRue
/
false
,
on
/
off
,
yes
/
no
, and so on) attributes that you may come across in HTML.
|
|
You can use more than one check box with the same name, but with different values, as in the following code:
<input type="checkbox" name="pet" value="dog"> dog<br />
<input type="checkbox" name="pet" value="cat"> cat<br />
<input type="checkbox" name="pet" value="iguana"> iguana
If the user checks both Cat and Iguana, the submission result includes the following:
pet=cat
pet=iguana
|
Radio
Buttons
Radio buttons
, for which only one choice can be selected at a time, are almost as simple to implement as check boxes. Just use
type="radio"
and give each of the options its own
<input />
tag, but use the same
name
for all the radio buttons in a
group
:
<input type="radio" name="card" value="v" checked="checked" /> Visa<br />
<input type="radio" name="card" value="m" /> MasterCard
The
value
can be any name or code you choose. If you include the
checked
attribute, that button is selected by default. (No more than one radio button with the same
name
can be checked.)
If the user selects
MasterCard
from the
preceding
radio button set, the following is included in the form submission to the server script:
card=m
If the user doesn't change the default
checked
selection,
card=v
is sent instead.
Selection Lists
Both
scrolling lists
and
pull-down pick lists
are created with the
<select>
tag. You use this tag together with the
<option>
tag, as this example reveals:
<select name="extras" size="3" multiple="multiple">
<option selected="selected">Electric windows</option>
<option>AM/FM Radio</option>
<option>Turbocharger</option>
</select>
No HTML tags other than
<option>
and
</option>
should appear between the
<select>
and
</select>
tags.
Unlike the
text
input type, the
size
attribute here determines how many items show at once on the selection list. If
size="2"
were used in the preceding code, only the first two options would be visible, and a scrollbar would appear next to the list so that the user could scroll down to see the third option.
Including the
multiple
attribute allows users to select more than one option at a time, and the
selected
attribute makes an option initially selected by default. The actual text that
accompanies
selected options is returned when the form is submitted. If the user selected
Electric windows
and
Turbocharger
, for instance, the form results would include the following lines:
extras=Electric windows
extras=Turbocharger
(As I cautioned you earlier with regard to the
checked
attribute, XHTML requires you to use
multiple="multiple"
and
selected="selected"
.)
|
If you leave out the
size
attribute or specify
size="1"
, the list will create a pull-down pick list. Pick lists cannot allow multiple choices; they are logically equivalent to a group of radio buttons. For example, another way to choose between credit card types
follows
:
<select name="card">
<option>Visa</option>
<option>MasterCard</option>
</select>
|
Text Areas
The
<input type="text">
attribute mentioned earlier allows the user to enter only a single line of text. When you want to allow multiple lines of text in a single input item, use the
<textarea>
and
</textarea>
tags instead. Any text you include between these two tags is displayed as the default entry. Here's an example:
<textarea name="comments" rows="4" cols="20">Please send more information.
</textarea>
As you probably guessed, the
rows
and
cols
attributes control the number of rows and
columns
of text that fit in the input box. The
cols
attribute is a little less exact than
rows
, and approximates the number of
characters
that fit in a row of text. Text area boxes do have a scrollbar, however, so the user can enter more text than fits in the display area.
