Lesson Plan. Course Title: Web Technologies

Transcription

1 Lesson Plan Course Title: Web Technologies Lesson Duration: 2 hours Session Title: Website Forms / Data Acquisition (NOTE: This lesson should follow the HTML Scripting Lesson) 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

2 MI Introduction Introduction (LSI Quadrant I): Show the students a web page with a form such as a web-based 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 Outline (LSI Quadrant II): Instructor Notes: 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 password field hidden fields reset button s es Collecting Data / The text area Collecting Data / Select menu Hands on individual practices Lab Exercise 1 Lab Exercise 2 End of Lesson Quiz MI 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.

3 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 MI Formal Assessment (LSI Quadrant III, IV): Following the lesson students should complete the quiz over the concepts presented in the lesson. Extension Extension/Enrichment (LSI Quadrant IV): Consider having students explore various form processing services and have students create forms with live processing.

4 Icon MI Teaching Strategies Verbal/ Linguistic Logical/ Mathematical Visual/Spatial Musical/ Rhythmic Bodily/ Kinesthetic Intrapersonal Interpersonal Naturalist Existentialist 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

5 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 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 Size Field Name First Name 30 fname Last Name 30 lname Address 50 address City 20 city State 2 state Zip 5 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

6 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 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.

7 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.

8 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? Which form element would be used to select a single item in a list? Which form element will send all the data entered into the form to the processing script? Which form element would you use to allow the visitor to enter multiple lines of text into a form field? input element

9 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? hidden field If you were to allow the visitor to select multiple items in a list, which form element would you use? 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? hidden field Which input element will clear out all the data entered into a form? rest button

10 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? Which form element would be used to select a single item in a list? Which form element will send all the data entered into the form to the processing script? Which form element would you use to allow the visitor to enter multiple lines of text into a form field? input element

11 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? hidden field If you were to allow the visitor to select multiple items in a list, which form element would you use? 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? hidden field Which input element will clear out all the data entered into a form? rest button