New Perspectives Html5 and Css3 Comprehensive 7th Edition Carey Solutions Manual

New Perspectives HTML5 and CSS3
Comprehensive 7th Edition Carey

Solutions Manual
Visit to download the full and correct content document: https://testbankdeal.com/dow
nload/new-perspectives-html5-and-css3-comprehensive-7th-edition-carey-solutions-
manual/
New Perspectives on HTML and CSS, 7th edition Instructor’s Manual Page 1 of 17
HTML and CSS

Tutorial Seven: Designing a Web Form
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 headings in 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
toward 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 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
http://coursecasts.course.com, where they can download the most recent CourseCast onto
their mp3 player. Ken Baldauf, host of CourseCasts, is a faculty member of the Florida State
University Computer Science Department, where he is responsible for taking technology
classes to thousands of FSU students each year. Ken is an expert in the latest technology and
sorts through and aggregates the most pertinent news and information for CourseCasts so
your students can spend their time enjoying technology, rather than trying to figure it out.
Open or close your lecture with a discussion based on the latest CourseCast.
Table of Contents
Tutorial Objectives 3
Introducing Web Forms 3
Starting a Web Form 3
Creating a Field Set 4
Creating Input Boxes 5
Adding Field Labels 6
Designing a Form Layout 6
Defining Default Values and Placeholders 7
Entering Date and Time Values 8
Creating a Selection List 9
Creating Option Buttons 9
Creating Check Boxes 10
Creating a Text Area Box 10

Entering Numeric Data 11
Suggesting Options with Data Lists 12
Working with Form Buttons 12
Validating a Web Form 13
Applying Inline Validation 14
End of Tutorial 16
Glossary 17
Tutorial Objectives
Students will have mastered the material in Tutorial Seven when they can:
Session 7.1 • Create option buttons

• Explore web forms • Create check boxes and text area boxes
• Work with form servers
• Create forms and field sets Session 7.3
• Create labels and input boxes • Create spinners and range sliders
• Explore form layout • Use data lists
• Create form buttons
Session 7.2 • Validate a form
• Work with date and time fields • Apply validation styles
• Create a selection list
Introducing Web Forms

LECTURE NOTES
• Discuss the use of a web form.
• Discuss the role of controls and widgets in a web form.
• Explain the different types of controls in a web form, including input boxes, option buttons,
radio buttons, selection lists, check boxes, and text area boxes.
• List out the different widgets used in a web form along with their uses, including spin boxes,
slider controls, calendar controls, and color pickers.
• Explain the use of a data field or a field in web forms with an example.
• Using Figure 7-2, explain the interaction process between a web form and a server.
BOXES
• Insight: Restricting Access to Web Server Programs (HTML 504)
FIGURES
• Figure 7-1, Figure 7-2
TEACHER TIP
Use Figure 7-1 to point out the different widgets and controls in a web form. Prepare a few examples
of the different types of web forms that can be created.
CLASSROOM ACTIVITIES
• Class Discussion:
Ask the students their views on whether allowing a user to directly interact with a
web page’s content instead of hyperlinks is a good practice or not.
LAB ACTIVITY
• None
Starting a Web Form

LECTURE NOTES
• Explain the syntax of the form element.
• Discuss the page elements included in a web form.
• Explain the role of the action, method, and enctype attributes in a form.
• Discuss the possible values of the method attribute, including get and post.
• Use Figure 7-4 to discuss the values of the enctype attribute.
• Discuss the role of the script element.
BOXES
• Tip: HTML also supports the name attribute for uniquely identifying forms (HTML 504).
• Reference: Inserting a Web Form (HTML 504)
FIGURES
• Figure 7-3, Figure 7-4, Figure 7-5, Figure 7-6
TEACHER TIP
Inform the students about the placement of the form element within a web page.
List out the differences between the get and post methods in HTML.
• Quick Quiz:
o True/ False: The method attribute has just one possible value in HTML. (Answer:
False)
o True/False: In HTML, the get method sends the form data in its own separate data
stream. (Answer: False)
LAB ACTIVITY
• Have the students use an editor of their choice to create a survey page using HTML and ask
them to add a form to it. Follow the instructions from the following section:
o HTML 505 “To insert a web form”
o HTML 506 “To specify how the form interacts with the server”
Creating a Field Set

LECTURE NOTES
• Explain the use of a field set in HTML.
• Discuss the syntax of the fieldset element.
• Explain the syntax and role of the legend element.
BOXES
• Reference: Creating a Field Set (HTML 508)
FIGURES
• Figure 7-7, Figure 7-8, Figure 7-9
TEACHER TIP
Inform the students that the id attribute is useful in distinguishing one field set from another, but it
is not compulsory to add it to a field set. Inform them that field sets act like block elements that can
expand or shrink to accommodate their content.
Explain the students that field sets are generally useful in assistive technologies. Cite the example of a
screen reader in this aspect.
Ask the students to express their opinion on why field sets and legends are required when
creating a form? Also, ask them to justify their answers with examples.
LAB ACTIVITY
• Have the students rework on the previous HTML file they created. Ask them to organize the
form into two field sets and add legends to them. Follow the instructions from the following
section:
o HTML 508 “To add field sets to a form”
o HTML 509 “To add legends to the field sets”
Creating Input Boxes

LECTURE NOTES
• Discuss the syntax of the input element.
• Use Figure 7-10 to describe the different type values for the input element.
• Discuss the concept of virtual keyboards.
BOXES
• Reference: Creating an Input Control (HTML 511)
• Tip: You can prevent users from entering data into a control by adding the attribute
disabled to the element tag (HTML 513).
• Insight: Navigating Forms with Access Keys (HTML 513).
• Tip: Always include a type attribute in your input box so that a user’s device can choose a
keyboard best suited for the form control (HTML 514).
FIGURES
• Figure 7-10, Figure 7-11, Figure 7-12, Figure 7-13
TEACHER TIP
Inform the students that if no type value is specified for the input element, the browser assumes a
default value of text and adds a simple text input box to the web form. Also, tell them that by
default, browsers display input boxes as inline elements.
Remind the students that in virtual keyboards, for email addresses the @ key is displayed as well as a
key that inserts the .com character string. Similarly, for url data, the virtual keyboard includes a key
that inserts the www. character string.
• Quick Quiz:
o True/ False: By default, the length of input boxes is 20 characters. (Answer: True)
o Quiz: Which attribute of the input element identifies the control in which a user
enters the field value? (Answer: id)
LAB ACTIVITY
• Have the students rework on the previous HTML file they created. Ask them to add multiple
input elements to the survey form. Follow the instructions from the following section:
o HTML 512 “To add input elements”
Adding Field Labels

LECTURE NOTES
• Discuss the syntax for the label element.
• Discuss the different approaches that can be used to lay out a form’s content.
BOXES
• Reference: Creating a Field Label (HTML 515)
FIGURES
• Figure 7-14
TEACHER TIP
Remind the students that by nesting a control within a label, both the control and its label can be
treated as a single object.
• Quick Quiz:
o True/ False: The for attribute is not required when the association between a text
string and a control is implicitly made. (Answer: True)
o True/ False: You can use only one approach at a time to associate a text string with a
control. (Answer: False)
LAB ACTIVITY
• Ask the students to rework on the previous HTML file they created. Ask them to associate
text strings to input boxes. Follow the instructions from the following section:
o HTML 515 “To insert form labels”
Designing a Form Layout

LECTURE NOTES
• Discuss the use of an effective form layout.
• Use figure 7-15 to explain the different form layouts.
• Discuss the syntax to add the size attribute to the input element in the HTML file.
BOXES
• Tip: In a two-column layout, you can move the label text even closer to the input controls by
right aligning the label text (HTML 517).
• Insight: Using the autocomplete Attribute (HTML 522)
FIGURES
• Figure 7-15, Figure 7-16, Figure 7-17, Figure 7-18, Figure 7-19, Figure 7-20, Figure 7-21
TEACHER TIP
Inform the students that the width of individual characters varies depending on the typeface and the
font style.
Ask the students to select a form layout they think is suitable for a survey conducted on
100 people about their preferences and choices. Also, ask them to justify their answers.
LAB ACTIVITY
• Have the students rework on the previous HTML file they created. Follow the instructions
from the following section:
o HTML 517 “To create a flexbox for the label and input elements”
o HTML 518 “To add styles for a flexible form layout”
o HTML 520 “To create a flexible layout for the form”
Defining Default Values and Placeholders

LECTURE NOTES
• Discuss the syntax to specify a default field value.
• Explain the concept of placeholders.
• Discuss the syntax to add the placeholder attribute.
BOXES
• Tip: You can replace the default field value by entering a new value for the field (HTML 523).
• Tip: The moz extension for Firefox version 18 and earlier treats the placeholder as a pseudo-
class rather than a pseudo-element (HTML 525).
• Proskills: Decision Making: Creating Cross-Browser Compatible Forms (HTML 526)
FIGURES
TEACHER TIP
Remind the students that different browser extensions cannot be placed within the same style rule
because if the style rule contains a selector that the browser doesn’t recognize, the entire rule will be
ignored.
• Quick Quiz:
o True/ False: Placeholders provide a hint about the kind of data that should be entered
into a field in HTML. (Answer: True)
o True/ False: CSS provides specific styles to format the appearance of placeholders.
(Answer: False)
LAB ACTIVITY
o HTML 523 “To define a default field value”
o HTML 524 “To define a placeholder”
Entering Date and Time Values

LECTURE NOTES
• Discuss the use of date and time fields in HTML.
BOXES
• Tip: If a browser does not support date and time controls, it will display an input box, leaving
the user free to enter the date or time value in whatever format he or she wants (HTML 530).
FIGURES
TEACHER TIP
Inform the students that the lack of uniformity in date formats makes it difficult for a web server
program to store and analyze the data. Provide them with a few real-time scenarios where this
situation is applicable.
• Quick Quiz:
o True/ False: In HTML, there is nothing to prevent users from entering the same date
in a wide variety of formats. (Answer: True)
o True/ False: In HTML5, the date and time fields can be indicated only by using the
time attribute. (Answer: False)
LAB ACTIVITY
• Ask the students to rework on the previous HTML file they created. Follow the instructions
o HTML 531 “To create a date field”
Creating a Selection List

LECTURE NOTES
• Explain the role and syntax of a selection list.
• Discuss the role of the selected attribute in the option element.
• Discuss the syntax to add the size attribute to the select element.
• Explain the different procedures to select multiple items from a selection list.
• Discuss the role and syntax of the optgroup element.
BOXES
• Reference: Creating a Selection List (HTML 532)
• Tip: The default width of the selection box is equal to the width of the longest option text
unless the width is set using a CSS style. (HTML 532).
• Tip: To assist your users in completing your form, you can include instructions on your page
detailing how to select multiple options from a selection list (HTML 534).
• Insight: Hidden Fields (HTML 536)
FIGURES
• Figure 7-27, Figure 7-28, Figure 7-29, Figure 7-30, Figure 7-31
TEACHER TIP
Remind the students that the first option in a selection list is selected by default and thus contains the
field’s default value. Also, inform the students that XHTML documents require the attribute
selected = “selected” to be compliant with XHTML standards for attribute values.
Inform the students that if they are using multiple selection lists in a form, they need to verify
whether the server-based program they are using can handle a single field with multiple values.
• Quick Quiz:
o True/ False: The default behavior of a selection list is to allow multiple selections from
the list of options. (Answer: False)
o True/ False: In HTML5, there is no CSS style to change the appearance of the option
group label alone. (Answer: True)
LAB ACTIVITY
o HTML 532 “To create a selection list”
o HTML 534 “To apply the size and multiple attributes”
Creating Option Buttons

LECTURE NOTES
• Draw a comparison between option buttons and selection lists.
• Explain the syntax to create option buttons in HTML.
• List out the role of the checked attribute in the option button.
BOXES
• Tip: To show that a group of radio buttons are associated with the same field, place the radio
button controls within a field set (HTML 537).
• Reference: Creating an Option List (HTML 537)
FIGURES
TEACHER TIP
Prepare a few examples to show the difference between selection lists and radio buttons. Also, inform
the students that radio buttons with different ids and field values can share the same field name.
• Quick Quiz:
o True/ False: A user can check multiple options in a group of radio buttons. (Answer:
False)
o True/ False: In HTML5, an option button is always selected by default. (Answer: False)
LAB ACTIVITY
o HTML 538 “To create a set of option buttons”
Creating Check Boxes

LECTURE NOTES
• Discuss the use of check boxes in HTML.
• Explain the syntax to create check boxes in HTML.
BOXES
• Tip: The default field value for a check box control is “On” (HTML 540).
• Reference: Creating a Check Box (HTML 540)
• Insight: Tab Indexing and Autofocus (HTML 541)
FIGURES
TEACHER TIP
Prepare a few examples to show the use of check boxes in HTML. Inform the students that check
boxes are a good option to be selected when they want their visitors to choose multiple units within a
group of choices.
Ask the students to express their views on the necessity of using checkboxes. Can there be
any other alternative to using checkboxes in HTML? Ask them to justify their answers.
LAB ACTIVITY
o HTML 540 “To add the checkbox control”
Creating a Text Area Box

LECTURE NOTES
• Discuss the use of a text area box in HTML.
• Discuss the syntax to create a text area box in HTML.
• Discuss the role of the rows and cols attributes in a text area box.
• Explain the role of the wrap attribute in a text area box.
BOXES
• Tip: When you enter more text than can fit into a text area box, the browser automatically
adds vertical scroll bars to the box (HTML 542).
• Reference: Creating a Text Area Box (HTML 542)
• Proskills: Written Communication: Creating Effective Forms (HTML 544)
FIGURES
TEACHER TIP
Prepare a few examples to show the limitations of input boxes. Next, show a few examples depicting
how text area boxes are appropriate for extended text strings.
• Quick Quiz:
o True/ False: The default browser style is to create a text area box of about 240
characters wide. (Answer: False)
o True/ False: In HTML, the size of a text area box cannot be increased. (Answer: False)
LAB ACTIVITY
o HTML 543 “To add a text area box”
Entering Numeric Data

LECTURE NOTES
• Point out that HTML supports restrictions on numeric values.
• Discuss the use of a spinner control and the syntax to create it.
• Explain the use and syntax of a slider control.
BOXES
• Reference: Creating Spinner Controls and Range Sliders (HTML 551)
• Insight: Styles for Widgets (HTML 553)
FIGURES
TEACHER TIP
Prepare a few examples to explain how spinner controls and slider controls work.
Also, inform the students that it a good practice to include the lower and the upper values of the
range before and after the slider control as many browsers do not include a scale on the range slider
widget.
• Quick Quiz:
o True/ False: In a slider control, an up or down arrow is displayed to increase or

decrease the field value by a set amount. (Answer: False)
o True/ False: To create a spinner control, the input element is applied using the
number data type. (Answer: True)
LAB ACTIVITY
o HTML 548 “To add a spinner control”
o HTML 551 “To add a range slider control”
Suggesting Options with Data Lists

LECTURE NOTES
• Discuss the concept of data list.
• Explain the syntax of the datalist element.
BOXES
• Tip: When applied to the range type, a data list appears as tick marks in the range slider
widget (HTML 553).
• Reference: Creating and Applying a Data List (HTML 554)
FIGURES
TEACHER TIP
Inform the students that the datalist tag is a new tag added in HTML5. Remind them that the
datalist element is used to specify a list of pre-defined options in an input box, and it appears as a
pop-up list of suggested values.
Ask the students to research on the global attributes supported by the datalist
element in HTML.
LAB ACTIVITY
o HTML 554 “To apply a data list to an input control”
Working with Form Buttons

LECTURE NOTES
• List the actions that can be performed with form buttons.
• Discuss the use and the syntax of a command button.
• Discuss the use and the syntax of a submit button.
• Explain the use and the syntax of a reset button.
• Discuss the role and the syntax of the button element.
BOXES
• Reference: Creating Form Buttons (HTML 556)
FIGURES
TEACHER TIP
Prepare a few examples to show the students the difference between the command, submit, and reset
buttons.
• Quick Quiz:
o True/ False: The appearance of command, submit, and reset buttons is determined by
the browser. (Answer: True)
o True/ False: The button border and the font of a submit button can be modified only
after adding the button element. (Answer: True).
LAB ACTIVITY
o HTML 557 “To create submit and reset buttons”
Validating a Web Form

LECTURE NOTES
• Discuss the process of validation.
• Define server-side validation.
• Define client-side validation.
• Discuss the role and the syntax of the required attribute.
• Point out a few examples to explain that a form will fail the validation test if the data values
entered into a field do not match the field type.
• Explain the concept of regular expression or regex.
• Discuss the role of the pattern attribute in validating a field value.
• Discuss the use of the maxlength attribute.
BOXES
• Tip: You can turn off client-validation by adding the attribute novalidate to the form
element (HTML 559).
• Reference: Validating Field Values (HTML 563)
• Insight: WebKit Styles for Validation Messages (HTML 565)
FIGURES
TEACHER TIP
Remind the students that whenever possible, they should supplement server-side validation with
client-side validation to reduce the server’s workload.
Inform the students that the maxlength attribute does not distinguish between characters and
digits. A user could enter the text string abcde as easily as 32175 and have the field values pass
validation.
• Quick Quiz:
o True/ False: If a required field is left blank, the browser will return an error message
without submitting the form. (Answer: True)
o True/ False: The confirmation dialog box appears every time you submit a form.
(Answer: False)
LAB ACTIVITY
o HTML 560 “To create submit and reset buttons”
o HTML 561 “To verify the form does not accept invalid data”
o HTML 563 “To test a field value against a regular expression”
Applying Inline Validation

LECTURE NOTES
• Point out the disadvantage of validation tests.
• Define inline validation.
• Use Figure 7-54 to discuss the different pseudo-classes that can be used to integrate inline
validation.
• Discuss the concept of focus in HTML.
• Explain the syntax of the valid and invalid pseudo-classes along with examples.
BOXES
• Proskills: Problem Solving: Using Form Building Tools (HTML 569)
FIGURES
TEACHER TIP
Inform the students that according to studies, users are less likely to make errors and can complete a
form faster if they are informed of data entry errors as they occur.
Remind the students that it is a good practice to highlight invalid field values only when the
respective input controls have the focus as displaying a form full of input backgrounds with different
background colors can be confusing and distracting for a user.
• Class Discussion
Ask the students to express their opinion on whether an inline validation is better
than an after submit validation? Ask them to justify their answers.
LAB ACTIVITY
o HTML 566 “To create style rules for elements that have the focus”
o HTML 568 “To perform inline validation”
End of Tutorial Material

• Review Assignments: Review Assignments provide students with additional practice of the
skills they learned in the tutorial using the same tutorial case, with which they are already
familiar.
• Case Problems: A typical NP tutorial has four Case Problems following the Review
Assignments. Short tutorials can have fewer Case Problems (or none at all); other tutorials
may have five Case Problems. The Case Problems provide further hands-on assessment of the
skills and topics presented in the tutorial, but with new case scenarios. There are three types
of Case Problems:
• Apply: In this type of Case Problem, students apply the skills that they have
learned in the tutorial to solve a problem.
• Challenge: A Challenge Case Problem involves three or more Explore steps. These
steps challenge students by having them go beyond what was covered in the
tutorial, either with guidance in the step or by using online Help as directed.
• Create: In a Create Case Problem, students are either shown the end result, such
as a finished website, and asked to create the document based on the figure
provided or asked to create something from scratch in a more free-form manner.
• ProSkills Exercises: This feature is new for Office 2010 and Windows 7. ProSkills exercises
integrate the technology skills students learn with one or more of the following soft skills:
decision making, problem solving, teamwork, verbal communication, and written
communication. The goal of these exercises is to enhance students’ understanding of the soft
skills and how to apply them appropriately in real-world, professional situations that also
involve software application skills. ProSkills exercises are offered at various points throughout
a text, encompassing the concepts and skills presented in a standalone tutorial or a group of
related tutorials.
Glossary
• access key (HTML 513) • Perl (HTML 504)
• calendar controls (HTML 502) • placeholders (HTML 524)
• check boxes (HTML 502) • post method (HTML 505)
• client-side validation (HTML 559) • radio buttons (HTML 502)
• color pickers (HTML 502) • regular expression or regex (HTML 562)
• command button (HTML 556) • reset button (HTML 556)
• Common Gateway Interface (CGI) (HTML • selection lists (HTML 502)
504) • server-side validation (HTML 559)
• controls (HTML 502) • slider control (HTML 550)
• data field or field (HTML 503) • slider controls (HTML 502)
• data list (HTML 553) • spin boxes (HTML 502)
• field set (HTML 507) • spinner control (HTML 548)
• focus (HTML 566) • submit button (HTML 556)
• form buttons (HTML 556) • text area boxes (HTML 502)
• get method (HTML 505) • validation (HTML 559)
• hidden field (HTML 536) • virtual keyboards (HTML 514)
• inline validation (HTML 565) • web form (HTML 502)
• input boxes (HTML 502) • widgets (HTML 502)
• option buttons (HTML 502)
Top of document

New Perspectives Html5 and Css3 Comprehensive 7th Edition Carey Solutions Manual

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

New Perspectives Html5 and Css3 Comprehensive 7th Edition Carey Solutions Manual

Uploaded by

Copyright:

Available Formats

New Perspectives HTML5 and CSS3

Comprehensive 7th Edition Carey

HTML and CSS

In addition to this Instructor’s Manual, our Instructor’s Resources CD contains PowerPoint

For your students:

Creating a Text Area Box 10

Session 7.1 • Create option buttons

Introducing Web Forms

Starting a Web Form

Creating a Field Set

Creating Input Boxes

Adding Field Labels

Designing a Form Layout

Defining Default Values and Placeholders

Entering Date and Time Values

Creating a Selection List

Creating Option Buttons

Creating Check Boxes

Creating a Text Area Box

Entering Numeric Data

o True/ False: In a slider control, an up or down arrow is displayed to increase or

Suggesting Options with Data Lists

Working with Form Buttons

Validating a Web Form

Applying Inline Validation

End of Tutorial Material

You might also like