HTML 5 and CSS 3 – Illustrated 2nd Ed. Instructor’s Manual: Unit J Page 1 of 11
HTML 5 and CSS 3 – Illustrated, 2nd Edition
Unit J: Creating and Processing Web Forms
A Guide to this Instructor’s Manual:
We have designed this Instructor’s Manual to supplement and enhance your teaching experience
through classroom activities and a cohesive chapter summary.
This document is organized chronologically, using the same heading in dark blue that you see in the
textbook. Under each heading you will find (in order): Lecture Notes that summarize the section,
Figures and Boxes found in the section, if any, Teacher Tips, Classroom Activities, and Lab Activities.
Pay special attention to teaching tips, and activities geared towards quizzing your students, enhancing
their critical thinking skills, and encouraging experimentation within the software.
In addition to this Instructor’s Manual, our Instructor’s Resources CD also contains PowerPoint
Presentations, Test Banks, and other supplements to aid in your teaching experience.
For your students:
Our latest online feature, CourseCasts, is a library of weekly podcasts designed to keep your
students up to date with the latest in technology news. Direct your students to
T
T
Ta
a
ab
b
bl
l
le
e
e
o
o
of
f
f
C
C
Co
o
on
n
nt
t
te
e
en
n
nt
t
ts
s
s
Unit Objectives
2
264: Design a Form
2
266: Create a Form
3
268: Create Text Fields
4
270: Customize Text Fields
5
272: Create Check Boxes
6
274: Create Option Buttons
7
276: Add Drop-Down Menus
9
278: Enable Form Submission
9
End of Unit Material
10
Glossary of Key Terms
11
HTML 5 and CSS 3 – Illustrated 2nd Ed. Instructor’s Manual: Unit J Page 2 of 11
U
U
Un
n
ni
i
it
t
t
O
O
Ob
b
bj
j
je
e
ec
c
ct
t
ti
i
iv
v
ve
e
es
s
s
Students will have mastered the material in Unit J when they can:
• Design a form
• Create a form
• Create text fields
• Customize text fields
• Create check boxes
• Create option buttons
• Add drop-down menus
• Enable form submission
2
2
26
6
64
4
4:
:
:
D
D
De
e
es
s
si
i
ig
g
gn
n
n
a
a
a
F
F
Fo
o
or
r
rm
m
m
LECTURE NOTES
• Show examples of web forms, and explain what web forms are typically used for.
• Point out that it is important to plan out a form before coding it, both for aesthetics and for usability
purposes.
• List what is important to consider when designing a form:
o Understanding the information that needs to be collected in the form
o Identifying the type of data required for each collected information item
o Ensuring that the form is logically organized and adequately explained
• Use the first name and last name example used in the text to demonstrate how separation of
information into several fields can be helpful when processing a form.
• Explain how to create a form that has a logical flow to it, pointing out the importance of displaying
related fields near each other.
• Point out that users typically fill out forms in order from the top of the form towards the bottom.
So, if you want the fields completed in a specific order, the first field should be placed at the top of
the form with subsequent fields beneath it.
• Use some sample forms to show that many forms end with a field where users can enter questions
or comments, and explain the advantages of placing this field at the end of the form.
HTML 5 and CSS 3 – Illustrated 2nd Ed. Instructor’s Manual: Unit J Page 3 of 11
TEACHER TIP
Demonstrate the syntax of creating a label for an element in a form, specifying that in most cases
the label is not an attribute of the element but rather a separate element which encloses the
• Introduce the term
fieldset
, explaining how fieldsets are used to create logical subsections of a form.
Demonstrate how most browsers display fieldsets to create a visual cue that fields share a common
subject.
• Explain the importance of adding a descriptive title or legend to each fieldset in order to increase
the usability of the form.
FIGURE: J-1
TABLES: J-1, J-2
• BOXES:
1. Quick Tip: Collect information the way you will use it; for example, while you could collect
street address information with separate fields for house number and street name, for most
purposes, a single field for the whole address is sufficient.
CLASSROOM ACTIVITIES
1. Critical Thinking: Look at Table J-1, and for each input type value specified provide two or more
examples of appropriate uses.
2. Critical Thinking: You are creating a form for doctors to electronically submit prescriptions to a
pharmacy. The form must include the following: information identifying the patient, information
identifying the doctor, information identifying the pharmacy to which the prescription is being sent,
and information identifying the prescribed medication and how it should be used. Create a sketch of the
form design, specifically marking fieldsets, legends, labels, and collected data types.
3. Critical Thinking: Look at Table J-2 and at the web form layout you created in Classroom Activity 2.
Which element would you use for each of the data items your form needs to collect? For each collected
data item, explain why the element you selected would be the most suitable.
2
2
26
6
66
6
6:
:
:
C
C
Cr
r
re
e
ea
a
at
t
te
e
e
a
a
a
F
F
Fo
o
or
r
rm
m
m
LECTURE NOTES:
2. Explain that like a table, a web page form contains a series of nested elements.
HTML 5 and CSS 3 – Illustrated 2nd Ed. Instructor’s Manual: Unit J Page 4 of 11
5. Demonstrate how to create fieldsets within the form using the fieldset element, and how to add
a legend to each fieldset using the legend element.
6. Point out that fieldset elements can be nested in order to create a clearer or more detailed web
form structure.
FIGURES: J-2, J-3, J-4
BOXES:
1. Trouble: Figure J-2 shows the completed code. Refer to it as needed as you complete these steps.
2. Quick Tip: As you work through the steps in this unit, be sure to indent your code as needed to make
it more readable.
3. Quick Tip: Most browsers display a border around each fieldset by default.
CLASSROOM ACTIVITIES
1. Quick Quiz:
2. Critical Thinking: Look at the web form layout you created in Classroom Activity 2 of the previous
lesson. How many fieldset elements would you use to create this form? For each fieldset
element, explain how it is useful.
LAB ACTIVITY
1. Ask students to code an outline of the prescription submission form they designed in Classroom
Activity 2 of the “Design a Form” section. The outline should include the fieldsets and their legends.
2
2
26
6
68
8
8:
:
:
C
C
Cr
r
re
e
ea
a
at
t
te
e
e
T
T
Te
e
ex
x
xt
t
t
F
F
Fi
i
ie
e
el
l
ld
d
ds
s
s
LECTURE NOTES
• Point out that the input element can be used to create many different types of fields that accept
user input in a form.
• Explain that the specific type of input element is determined by setting the type attribute of the
input element.
• Specify that each input element must have a unique value for the name attribute so that the form
information can be processed once it is submitted.
HTML 5 and CSS 3 – Illustrated 2nd Ed. Instructor’s Manual: Unit J Page 5 of 11
provide additional functionality to these types of text boxes, e.g., validity checking. Give an example
demonstrating how each of these input types would be used.
• Introduce the textarea element, explaining that it is a field that allows users to enter multiple
lines of text. Explain to students the purpose of the rows and cols attributes of a textarea field.
TEACHER TIP
Point out that HTML does not allow you to limit the number of characters entered by a user in a
text area. The purpose of the rows and cols attributes is not to specify the amount of data that can
be entered but rather to specify the size of the text area which is displayed on the form.
FIGURES: J-5, J-6
TABLE: J-3
BOXES:
1. Quick Tip: When a user submits a completed form, the value for each field’s name attribute is paired
with the user input in that field to identify the data entered in each field.
CLASSROOM ACTIVITIES
1. Classroom discussion: Table J-3 specifies type values for special data types. Have students discuss
their experience with filling out forms that include these data types. Did they run into any problems
with these data types, or do they think these data types have any specific disadvantages? Be sure to
consider this issue with respect to international users.
2. Quick Quiz:
LAB ACTIVITY
1. Have students open the HTML file they created in the Lab Activity of the “Create a Form” lesson,
and add to the code all text the fields and text boxes specified in their design sketched in Classroom
Activity 2 of the “Design a Form” section.
2
2
27
7
70
0
0:
:
:
C
C
Cu
u
us
s
st
t
to
o
om
m
mi
i
iz
z
ze
e
e
T
T
Te
e
ex
x
xt
t
t
F
F
Fi
i
ie
e
el
l
ld
d
ds
s
s
LECTURE NOTES
HTML 5 and CSS 3 – Illustrated 2nd Ed. Instructor’s Manual: Unit J Page 6 of 11
• Point out that labels and text fields usually require styling to optimize usability and to ensure proper
layout.
• Demonstrate how you can specify the position and/or width of a label and/or input element
using various CSS properties. Show how styling can ensure that all the text fields are at a uniform
distance from their labels, similar to how tabbing is used to organize a word processing document.
FIGURES: J-7, J-8, J-9
BOXES:
1. Quick Tip: Placeholder text can be useful in providing examples of formats for input or for describing
what users should enter in a given text box.
2. Quick Tip: The placeholder attribute is ignored by older browsers, so it should not be used to
display crucial information.
3. Clues to Use: Changing styles on focus
You can use the :focus pseudo-class to change the style of an input or textarea element when a user
is working with it. This technique is commonly used to change the background color of a field to help users
visually identify their position in a form. Unlike links, which use different pseudo-classes for mouse and
keyboard interaction, the :focus pseudo class responds to both mouse and keyboard interaction in a form.
A field has focus when a user clicks it, touches it, or navigates to it with a keyboard.
CLASSROOM ACTIVITIES
1. Classroom discussion: Have students discuss how they might determine the appropriate length for a
given text box. How might this change for a layout for use on a smartphone or other handheld device?
2. Critical Thinking: In Figures J-7, J-8, and J-9, you saw code for styling the text boxes to be positioned
one beneath the other, with specific text field widths. What CSS style rules should you write in order to
place all three elements shown in Figure J-9 on a single line?
LAB ACTIVITY
1. Have students open the HTML file they created in the Lab Activity of the “Creating a Form” lesson,
2
2
27
7
72
2
2:
:
:
C
C
Cr
r
re
e
ea
a
at
t
te
e
e
C
C
Ch
h
he
e
ec
c
ck
k
k
B
B
Bo
o
ox
x
xe
e
es
s
s
LECTURE NOTES
HTML 5 and CSS 3 – Illustrated 2nd Ed. Instructor’s Manual: Unit J Page 7 of 11
• Explain that check boxes are used in order to present users with a predetermined set of choices; and
you want users to be able to select one or more predefined choices independent of each other.
• Demonstrate the use of a check box by clicking to add or remove a check mark in order to select or
deselect the check box.
• Point out that check boxes are ideal for allowing users to indicate whether a particular statement
applies to them.
TEACHER TIP
To create checkboxes that are preselected when the web form loads, add the checked attribute to
the input element.
FIGURES: J-10, J-11, J–12
BOXES
1. Quick Tip: A check box should always precede its label text for optimal usability.
2. Quick Tip: Different browsers format check boxes differently by default, so the check boxes in your
browser may not match those in the figure.
3. Clues to Use: Marking fields as required
Often one or more fields on a web form are marked as required— that is, fields the user must complete.
Many websites implement scripts to check if required fields are completed; if not, these scripts can prevent
the submission of the form and display an error message. Modern browsers also support the HTML5
required attribute, which can replace script-based verification. You simply add the attribute required
(or required=”required” in XHTML documents) to any required field element. For instance, to
create a text box that users must complete, you use the code <input type=”text” required>. You
should also include a visual cue on your web page for each required field, along with an explanation of what
the cue means. A red asterisk is commonly used to denote required fields on web forms. The required
attribute can’t replace script-based validation for websites that must support older browsers, but it can
supplement script-based validation for many websites.
CLASSROOM ACTIVITIES
1. Critical Thinking: As mentioned before, elements within a form can be nested one inside the other.
Think of forms you have seen and give examples of situations when a check box element is nested
inside another element. What are the advantages of this format?
2. Quick Quiz:
HTML 5 and CSS 3 – Illustrated 2nd Ed. Instructor’s Manual: Unit J Page 8 of 11
2
2
27
7
74
4
4:
:
:
C
C
Cr
r
re
e
ea
a
at
t
te
e
e
O
O
Op
p
pt
t
ti
i
io
o
on
n
n
B
B
Bu
u
ut
t
tt
t
to
o
on
n
ns
s
s
LECTURE NOTES:
• Introduce the option button, or radio button, form field, specifying that it requires users to select a
single option from a set of mutually exclusive choices.
• Point out that an option button is best suited for prompting users to select only one item from a
group, such as the age range that applies to the user.
• Point out that option buttons and check boxes ensure that all user input for a particular element
matches a standard list of options, preventing typographical errors and easing the processing of
submitted responses.
FIGURES: J-13, J-14, J-15
TABLE: J-4
BOXES:
1. Quick Tip: HTML5 allows the checked attribute with no value; for XHTML code, you must supply
the full attribute-value pair: checked=”checked”.
2. Quick Tip: Be sure to use a comma to separate the selectors.
3. Quick Tip: Check boxes also support the checked attribute.
4. Clues to Use: Implementing selection interfaces
.
CLASSROOM ACTIVITIES
1. Quick Quiz:
HTML 5 and CSS 3 – Illustrated 2nd Ed. Instructor’s Manual: Unit J Page 9 of 11
2. Critical Thinking: You are creating a survey form for a school. Parents of students in the school are
expected to answer the form and provide input regarding their opinion of the school. The form includes
the following questions:
a. How did you hear about the school?
b. Evaluate the mathematics program in the school.
c. Evaluate the English program in the school.
d. Evaluate the lunch provided by the school.
e. In what grade is (are) your child(ren)?
For each of these questions, explain whether you would use check boxes or option buttons and if so,
why. Make sure to list the possible answers you would provide in the form. Do you think this form
would be sufficient for parental input? Does it allow parents to express how they feel about the school
and its programs, or should other input elements be required?
2
2
27
7
76
6
6:
:
:
A
A
Ad
d
dd
d
d
D
D
Dr
r
ro
o
op
p
p–
–
–D
D
Do
o
ow
w
wn
n
n
M
M
Me
e
en
n
nu
u
us
s
s
LECTURE NOTES:
• Introduce the term drop-down menu, and explain how this is another method of creating a list of
options from which users can select.
• Demonstrate to students how a drop-down menu is rendered by a browser, and how it is used to
make a selection.
• Point out that drop-down menus are best suited for fields where there is a large number of options
that would occupy a lot of space, such as when selecting a date.
• Explain the syntax for creating a drop-down menu using the select element and using option
elements nested within it to specify the list items.
FIGURES: J-16, J-17, J-18
BOXES:
1. Quick Tip: An element that creates a field does not need to be nested within the associated label
element; this is only done when convenient for positioning fields and label text.
2. Quick Tip: The select and option elements are not included in your reset style rules because
browsers have custom layouts for these elements that use the padding, border, and/or margin
properties.
HTML 5 and CSS 3 – Illustrated 2nd Ed. Instructor’s Manual: Unit J Page 10 of 11
CLASSROOM ACTIVITIES
2
2
27
7
78
8
8:
:
:
E
E
En
n
na
a
ab
b
bl
l
le
e
e
F
F
Fo
o
or
r
rm
m
m
S
S
Su
u
ub
b
bm
m
mi
i
is
s
ss
s
si
i
io
o
on
n
n
LECTURE NOTES:
• Explain that a form needs to include a submit button so that users can submit the data they have
entered.
• Demonstrate how to create a submit button using an input element with a type value of
submit, and that the value attribute specifies the text that will be displayed on the button.
• Use Table J-5 to outline different input types that can be used for buttons, such as image and
reset.
• Point out that the action attribute for the form element must be set to specify the name and
location of a script that will accept the data from the form, and that the method attribute must be
set to indicate the way data should be submitted.
• Use Figure J-22 to explain that user agents group the name attribute of each field with the value
entered or selected by the user, and therefore every field with information to be submitted must
have a value for the name attribute.
FIGURES: J-19, J-20, J-21, J-22
TABLE: J-5
CLASSROOM ACTIVITIES
1. Quick Quiz:
E
E
En
n
nd
d
d
o
o
of
f
f
U
U
Un
n
ni
i
it
t
t
M
M
Ma
a
at
t
te
e
er
r
ri
i
ia
a
al
l
l
•
•
•
Concepts Review – Includes screen identification, multiple choice, and matching questions.
HTML 5 and CSS 3 – Illustrated 2nd Ed. Instructor’s Manual: Unit J Page 11 of 11
•
•
•
Skills Review – Provides additional hands-on exercises that mirror the progressive style of the
lesson material.
•
•
•
Independent Challenges 1, 2 and 3 – Case projects that require critical thinking and application of
the unit skills. The Independent Challenges increase in difficulty, with the first being the easiest
(with the most step-by-step detailed instructions). Independent Challenges 2 and 3 become
increasingly more open-ended.
G
G
Gl
l
lo
o
os
s
ss
s
sa
a
ar
r
ry
y
y
o
o
of
f
f
K
K
Ke
e
ey
y
y
T
T
Te
e
er
r
rm
m
ms
s
s
• check box (272)
• control (264)
• drop-down menu (276)
• field (264)
• fieldset (264)
• form (264)
• label (264)
• legend (264)
• option button (274)
• radio button (274)
• selection interfaces (274)
• submit button (278)
• text area (268)
• text box (268)
Top of Document