HTML and CSS Reference
In-Depth Information
figure 6-2
Proposed survey form
Required values are marked by an asterisk (*)
Share Your Experience at Red Ball Pizza
Date of visit
Customer Information
Name *
Street address
Receipt number *
Order type
City
State
Was the service friendly?
Yes
No
Postal code
Yes
No
Was the order correct?
Was the food hot?
Phone number
Yes
No
E-mail *
Overall food quality
0
10
Overall service quality
0
10
Where did you
hear about us?
General comments
How many times do you
dine out per month?
What's your favorite Red
Ball special dish?
The form is divided into two topical areas. The area on the left includes elements
requesting contact information from the customer, including the customer's name, phone
number, and e-mail address. The right side of the form contains questions regarding the
customer's treatment at Red Ball Pizza and his or her opinion of the food and service.
Parts of a Web Form
Each piece of information entered into a form is stored in a
ield
, and the data is known
as the
field value
. In some fields, users are free to enter anything they choose, while
other fields are limited to a set of allowed values. Users enter or select a field value using
control elements
, which are buttons, boxes, lists, and so on, that provide a way of associ-
ating a field value with a particular field. HTML supports the following control elements:
•
input boxes
for text and numerical entries
•
option buttons
, also called
radio buttons
, for selecting a single option from a pre-
defined list
•
selection lists
for long lists of options, usually appearing in a drop-down list box
•
check boxes
for questions limited to true/false or yes/no responses
•
text areas
for extended entries that can include several lines of text
HTML5 introduced the following control elements:
•
color pickers
to choose colors from an array of color values
•
calendar pickers
to select dates and times from a calendar or clock
•
spin boxes
for specifying numeric values from sets of numbers
•
sliders
for selecting numeric values from ranges of possible values
At the time of this writing, these HTML5 control elements are not supported by all
current browsers; you'll explore browser support in more detail later in this tutorial.
Alice's proposed survey form includes several examples of these different control ele-
ments, each one associated with a particular field. Note that some fields in the survey
form are
required fields
, meaning that before the form data can be submitted, users must
enter values for those fields. Alice's survey form includes required fields for recording the
