Lesson Plan
Course Title: Web Technologies
Session Title: Website Forms / Data Acquisition
(NOTE: This lesson should follow the HTML Scripting Lesson)
Lesson Duration:
2 hours
Performance Objective:
Upon completion of the lesson, students will be able to collect data from websites and send the
data to the appropriate script for processing.
Specific Objectives:
• Students will understand how information is collected online.
• Students will be able to create forms on their web pages.
• Students will be able to select the appropriate form field based on the type of information
being collected.
Preparation
TEKS Correlations:
• 8A – Recognize the importance of Internet programming standards;
• 8C – Use standard applications such as text-based programs, word processors; and
web authoring software;
• 9G – Demonstrate the ability to construct secure transaction interfaces from the web
server to the customer.
Instructor / Trainer
References:
• Content Developer Knowledge
Instructional Aids:
• Presentation on Form Processing & Data Acquisition
Materials Needed:
• Presentation printed in Notes format for each student.
• Code sample handout printed for each student
•
•
Form Lab Exercise 1 printed for each student.
Form Lab Exercise 2 printed for each student
End of Lesson Quiz (and Quiz Key)
Equipment Needed:
• Digital Projector to show presentation
• Individual computers with Internet access for each student
Learner
MI
Introduction
Introduction (LSI Quadrant I):
Show the students a web page with a form such as a web-based email form, or a
search engine site, or a site with a registration form. Discuss how giving a web site
the ability to collect information from the visitor increases the usefulness and
productivity of a web site substantially.
Outline
MI
MI
Outline (LSI Quadrant II):
•
Introduction: Show students some websites with
forms and discuss how useful the ability to
collect data from the visitor can be.
•
Creating Forms
• The form block and form tag
• Collecting Data / The input tag
• text field
• password field
• hidden fields
• submit button
• reset button
• radio buttons
• checkboxes
• Collecting Data / The text area
• Collecting Data / Select menu
•
Hands on individual practices
• Lab Exercise 1
• Lab Exercise 2
•
End of Lesson Quiz
Instructor Notes:
Application
Guided Practice (LSI Quadrant III):
During the presentation, the students should create the forms demonstrated. The
students should be provided with the Sample Code handouts. The Sample Code
numbers in the presentation will correspond with the Sample Code numbers on the
handout.
MI
Independent Practice (LSI Quadrant III):
Following the presentation, students should complete the two hands-on lab
exercises on their own.
MI
Summary
Review (LSI Quadrants I and IV):
Review the various types of form fields. Verbally quiz students as to which would be
the most appropriate form field by stating a type of information to be collected, such
as a phone number. Students should respond with a text field. Quiz them on a
variety of information so that each form field is covered.
MI
Evaluation
Informal Assessment (LSI Quadrant III):
As students are completing the lab exercises look carefully at the code they are
writing. Make sure that the form fields are being named appropriately and the form
tag is written correctly.
MI
Formal Assessment (LSI Quadrant III, IV):
Following the lesson students should complete the quiz over the concepts
presented in the lesson.
MI
Extension
Extension/Enrichment (LSI Quadrant IV):
Consider having students explore various form processing services and have
students create forms with live processing.
Icon
MI
Verbal/
Linguistic
Logical/
Mathematical
Visual/Spatial
Musical/
Rhythmic
Bodily/
Kinesthetic
Intrapersonal
Interpersonal
Naturalist
Existentialist
Teaching Strategies
Lecture, discussion, journal
writing, cooperative learning,
word origins
Problem solving, number
games, critical thinking,
classifying and organizing,
Socratic questioning
Mind-mapping, reflective
time, graphic organizers,
color-coding systems,
drawings, designs, video,
DVD, charts, maps
Use music, compose songs
or raps, use musical
language or metaphors
Use manipulatives, hand
signals, pantomime, real life
situations, puzzles and board
games, activities, roleplaying, action problems
Reflective teaching,
interviews, reflective
listening, KWL charts
Cooperative learning, roleplaying, group brainstorming,
cross-cultural interactions
Natural objects as
manipulatives and as
background for learning
Socratic questions, real life
situations, global
problems/questions
Personal Development
Strategies
Reading, highlighting, outlining,
teaching others, reciting information
Organizing material logically, explaining
things sequentially, finding patterns,
developing systems, outlining, charting,
graphing, analyzing information
Developing graphic organizers, mindmapping, charting, graphing, organizing
with color, mental imagery (drawing in
the mind’s eye)
Creating rhythms out of words, creating
rhythms with instruments, playing an
instrument, putting words to existing
songs
Moving while learning, pacing while
reciting, acting out scripts of material,
designing games, moving fingers under
words while reading
Reflecting on personal meaning of
information, studying in quiet settings,
imagining experiments, visualizing
information, journaling
Studying in a group, discussing
information, using flash cards with
other, teaching others
Connecting with nature, forming study
groups with like minded people
Considering personal relationship to
larger context
Name: ___________________________ Date: __________________ Period: ______________
Forms & Data Acquisition Lab Exercise 1
For this lab you will create the form shown below. The form will be submitted to a processing
script to verify the proper transmission of information.
•
•
•
•
•
•
Open your text editor and setup the basic HTML tags.
Below the opening body tag, open a form tag.
Below the opening form tag, add a hidden field. The name should be labcode and the
value should be 3287.
The request for a Username should be a text field named user.
The request for a Password should be a password field named pass.
Below the request for a username and password, add a horizontal rule <hr />
The remaining fields, with the exception of the button, should all be text fields. Assign
each field the following names and sizes:
Form Field
First Name
Last Name
Address
City
State
Zip
•
•
•
•
Size
30
30
50
20
2
5
Field Name
fname
lname
address
city
state
zip
Be sure you layout the form fields as shown with all fields on a separate line, except for
the City, State, and Zip which should all be on the same line.
The button should be a submit button with a value of Register.
Make sure you have included the closing form tag below the submit button.
Resave the document and preview it in your browser.
Enter data into the browser and submit it. The processing script should display each of
your field names with the data entered into the field
Name: ___________________________ Date: __________________ Period: ______________
Forms & Data Acquisition Lab Exercise 2
For this lab you will create the form shown below. The form will be submitted to a processing
script to verify the proper transmission of information.
•
Open your text editor and setup the basic HTML tags.
•
Below the body tag, add the text “Tour Package Registration” as a centered level 1
heading.
•
Below the opening body tag, open a form tag. The method should be post.
•
Below the opening form tag, add a hidden field. The name should be labcode and the
value should be 3287.
•
The name for the first name field should be named first and the name for the last name
field should be last.
•
Both the fields should be on the same line as shown in the example. After the last name
field add two line breaks.
•
The Number of People in party should be entered with a select field. The visitor should
have the option to select from 1 to 4 people in their party. The value and label for each
option should be 1, 2, 3, and 4 consecutively.
•
The Select Tour Package should give the visitor the options to select from New York,
Hollywood, Orlando, and Nashville. The options and values should both be the city
names.
•
Add two line breaks after the Tour Package select menu.
•
The visitor should select whether to include air travel with a radio button. The radio
button group should be called airline. The value for Yes field should be yes and the
value for the No field should be no.
•
After the radio buttons set add two line breaks.
•
The checkboxes should give the visitor the option to add Meals, Evening Wine, or Car
Rental. The name of each field should be meals, wine, and car consecutively.
•
After the checkboxes add two line breaks.
•
Add a submit button with a value of Process Request.
•
Make sure you have a closing form tag after the submit button.
•
Resave the document and preview it in your browser.
•
Enter data into the browser and submit it. The processing script should display each of
your field names with the data entered into the field.
Name: ___________________________ Date: __________________ Period: ______________
Forms & Data Acquisition Quiz
•
Which form attribute specifies how the data in the forms should be sent?
• method
• post
• action
• name
•
What does the action attribute do?
• Specifies how the data should be sent to the processing script.
• Specifies the URL of the processing script.
• Contains data to be sent to the processing script.
• Specifies what the form does.
•
Which form element is used to enter a single line of information?
• text field
• textarea
• checkbox
• select menu
•
Which form element would be used to select a single item in a list?
• checkbox
• textarea
• text field
• radio button
•
Which form element will send all the data entered into the form to the processing script?
• radio button
• submit button
• button
• select menu
•
Which form element would you use to allow the visitor to enter multiple lines of text into a
form field?
• text field
• select menu
• input element
• textarea
•
If you were to ask the visitor to select a single item in a list, and only display the selected
item, which form element would you use?
• checkbox
• radio button
• select menu
• hidden field
•
If you were to allow the visitor to select multiple items in a list, which form element would
you use?
• checkbox
• radio button
• button
• submit button
•
Which form element will allow you to send information to the server that the visitor does
not enter, and does not show up on the form?
• select menu
• radio button
• hidden field
• textarea
•
Which input element will clear out all the data entered into a form?
• submit button
• rest button
• radio button
• button
Forms & Data Acquisition Quiz - KEY
•
Which form attribute specifies how the data in the forms should be sent?
• method
• post
• action
• name
•
What does the action attribute do?
• Specifies how the data should be sent to the processing script.
• Specifies the URL of the processing script.
• Contains data to be sent to the processing script.
• Specifies what the form does.
•
Which form element is used to enter a single line of information?
• text field
• textarea
• checkbox
• select menu
•
Which form element would be used to select a single item in a list?
• checkbox
• textarea
• text field
• radio button
•
Which form element will send all the data entered into the form to the processing script?
• radio button
• submit button
• button
• select menu
•
Which form element would you use to allow the visitor to enter multiple lines of text into a
form field?
• text field
• select menu
• input element
• textarea
•
If you were to ask the visitor to select a single item in a list, and only display the selected
item, which form element would you use?
• checkbox
• radio button
• select menu
• hidden field
If you were to allow the visitor to select multiple items in a list, which form element would you
use?
• checkbox
• radio button
• button
• submit button
•
Which form element will allow you to send information to the server that the visitor does
not enter, and does not show up on the form?
• select menu
• radio button
• hidden field
• textarea
•
Which input element will clear out all the data entered into a form?
• submit button
• rest button
• radio button
• button