HTML and CSS Reference
In-Depth Information
The appearance of the option group label is determined by the browser. You can apply
a style to an entire option group including its label, but there is no CSS style to change
the appearance of the option group label alone.
Alice does not need you to use an option group for her survey form because the num-
ber of options is so small.
Creating Passwords and Hidden Fields
Fields and field values are not always visible to users. For sensitive data such as passwords
or credit card numbers, you can display an input box using the
password
data type
<input name=”
name
” type=”password” />
where
name
is the field name. Any information that a user enters will be displayed as a
series of dots or asterisks, protecting the information from prying eyes.
Another way of hiding information is with a hidden field, which is created using an
input
element with the hidden data type, as follows
<input name=”
name
” type=”hidden” value=”
value
” />
where
value
is the value stored in the field. With a hidden field, both the field value and
the input control are hidden from the user. Hidden fields are used for fields that have a
predefined value that will be used by the script processing the Web form. Even though hid-
den fields are not displayed by browsers, the field values still can be read by examining the
source code; for this reason, you should not put any sensitive information in a hidden field.
Creating Option Buttons
In the next part of the form, Alice wants to ask customers general questions about their
experiences at the restaurant. She wants to know whether the service was friendly,
whether orders were recorded correctly, and if the food was delivered hot. She suggests
that you present these questions using option buttons.
Option buttons, also called radio buttons, are like selection lists in that they limit
users to a set of possible values; but unlike selection lists, the options appear as separate
control elements on the form. Option buttons are created using the
input
element with
the
type
attribute set to a value of
radio
as follows
<input type=”radio” name=”
name
” value=”
value1
” />
<input type=”radio” name=”
name
” value=”
value2
” />
<input type=”radio” name=”
name
” value=”
value3
” />
…
where
name
is the name of the data field associated with the option buttons, and
value1
,
value2
,
value3
, etc. are the field values associated with each option. When multiple
option buttons are applied to the same data field, browsers treat them as a group, and
selecting one option button automatically deselects all of the others. Figure 6-35 shows
an example of a Web form that uses an option button group to indicate political party
affiliations.
