Creating a Form on a Web Page - HTML5 and CSS Comprehensive - page 295

The <input /> tag creates an input control, while the attribute and value
type="checkbox" specifies that the input control is a check box. The name attribute of the
input control is set to the value musictype. When the form is submitted, the name is used
to distinguish the values associated with these checkbox fields from other fields. The value
attribute "country" indicates the value submitted in the file, if this check box is selected.

To Add Check Boxes

In the Web page form, six check boxes are used to allow the user to select one or more types of music to add.
Table 6-6 shows the HTML code to add six check boxes to the form.

Table 6-6 HTML Code to Add Check Boxes

Line HTML Tag and Text

<br />Select the type(s) of music that you prefer:

23

<br /><input name="musictype" type="checkbox" value="country" />Country &nbsp;

24

<input name="musictype" type="checkbox" value="folk" />Folk &nbsp;

25

<input name="musictype" type="checkbox" value="latin" />Latin &nbsp;

26

<input name="musictype" type="checkbox" value="pop" />Pop &nbsp;

27

<input name="musictype" type="checkbox" value="rap" />Rap &nbsp;

28

<input name="musictype" type="checkbox" value="rock" />Rock

29

The following step enters HTML code to add check boxes to the form.

1

•
Line 23 and indented one Tab stop.

Check that the insertion point is on

•
6-6 and then press the e n t e r key
twice (Figure 6-11).

Enter the HTML code shown in Table

insertion point
on line 31 and
tabbed once

How do I determine whether to
list fields on the same line or use
a line break or paragraph break
between fields?
Consider the “real estate” (the
amount of space available) of the
Web page itself. If you have an
especially long form that the visitor
has to scroll down, consider positioning the fields across, rather than down the form. You do
not want to crowd the information, but you also do not want to force the visitor to scroll excessively.

six check boxes
added to form

name value describes
checkbox control

input control type
set to checkbox

value if
selected

Figure 6-11

Adding Radio Buttons
The next step is to add radio buttons to the form. Remember that radio buttons are appropriate to use when
a user can select only one choice from a set of two or more choices. Although questions with a Yes or No answer are
perfect for the use of radio buttons, other types of questions are appropriate as well. In the case of selecting where
they make most of their music purchases, users are asked to select one choice from five options. On the Web page
form radio buttons allow users to select a one-choice answer to a question.