Griffin | Web Design
 
Resume Table of Contents  

Web Design
HTML

Chapter 7
Creating a Form

 
State Standards
 
  • WD 2.7 Content Standard: Students produce a basic HTML/XHTML document using forms. (A1.9.1)(A1.9.6)
  • WD 2.7.1 Discuss the concept of a form on a web document and the various tags that can be contained within the form (e.g. text entry fields, radio buttons, submit button)
  • WD 2.7.2 Design a basic form from given specifications, utilizing a variety of input controls (e.g. text entry fields, radio buttons)
  • WD 2.7.3 Write the code for the following:
    • text entry field
    • radio buttons
    • check box button(s)
    • pull-down menu
    • scroll box
    • pull-down menu
    • submit/reset button
  • WD 2.7.4 Code selected default values for all input tags
  • WD 2.7.5 Distinguish between the GET and POST methods to process collected data (LA11.1.3)(LA12.1.3)
Chapter Objectives
 
  • Define terms related to forms
  • Describe the different form controls and their uses
  • Use the <fieldset> tag to group form information
  • Use different form tags:
    • <form> tag
    • <input> tag
    • <select> tag
    • <option> tag
  • USe different form elements:
    • text box
    • check boxes
    • selection menu with multiple options
    • radio buttons
    • textarea box
    • Submit button
    • Reset button
  • 3 BIG advantages of forms
    • don't have to handle paper
    • reduces errors
    • quick process for the user
    • easy to use
1. HTML Assignment
Duration: 1 Period
  Read/Skim Chapter 7/CH7 PowerPoint p. 290 - 319
2.

Lecture CH7

  • Introduction (290)
  • Creating Web Page Forms (292)
    • input controls
      • text box
      • password text box
      • radio buttons
      • check boxes
      • selection menu
      • list arrow
      • textarea
      • left-aligned legend
      • first grouping
      • right-aligned legend
      • second grouping
      • submit button
      • reset button
3.

HTML Project 7 Assignment
Duration: 1 Period

Begin the web page starting on page 298. Create a new folder in HTML named CH7 and save as orderform.htm in the CH7 folder. (Note: There are no spaces in the file name.)

  • Creating a Form on a Web Page (298)
  • Adding Radio Buttons and a Textarea (309)
  • Submit and Reset Buttons (312)
  • Organizing a Form Using Form Groupings (313)

Make sure to type your name, Period, date, and class at the end of the Web page.

Ch 7 Data Files

home tour code

Grading:
1. Web Page Heading  
2. paragraph of text  
3. Legend of the first fieldset  
4. text boxes  
5. check boxes  
6. selection menu  
7. legend of the second fieldset  
8. textarea  
9. submit button  
10. reset button  
11. default value = null  
12. name, period, date, class  
Total  
 ___ 10 points
p. 298 - 320
4.

HTML Apply Your Knowledge Assignment
Duration: 1 Period

p. 323
 

1. Editing the Apply Your Knowledge Web Page

Open apply7-1.htm. Complete the Web page outlined on page 323. Save as
apply7-1solution.htm. Feel free to use Dreamweaver.

Make sure to type your name, Period, date, and class at the end of the Web page.

apply5-1

Grading:
1. heading  
2. correct fieldsets/groupings  
3. text box lengths  
4. radio and check boxes  
5. months drop down  
6. text area  
7.. default value = null  
8. submit and reset  
9. san serif fonts  

10.

name, period, date, class  
Total  
 ___ 10 points
5. HTML In the Lab Assignment
Duration: 2 Period
p. 324 - 325
 

Start a new HTML file with the title, [Your Name]LAB7-1.htm. Complete the Web page outlined on page 324 - 325. Feel free to use Dreamweaver.

Lab5-3

Grading:
1. Heading and Instructions  
2. 3 text boxes  
3. 3 radio buttons for grade  
4. 3 radio buttons for interval  
5. food type  
6. comments  
7. default value = null  
8. submit/reset  
9. san serif fonts  
10. name, period, date, class  
Total  
 ___ 10 points
6. HTML Assignment
Duration: 2 Periods
 
 

Cases and Places - Case *: Your Own Form

Create a form of your own design. Use a table to line up each control. Include name period, date, and class.

Print and label each section. (i.e. hand write #2 Web Page Heading next to that section on the print out of your form.)

Grading:
1. HTML Title  
2. Web Page Heading  
3. Table is within a fieldset /
Form controls are aligned
 
4. paragraph of text  
5. legend of the first fieldset  
6. text boxes  
7. check boxes  
8. radio buttons  
9. list menu  
10. legend of the second fieldset  
11. textarea  
12. default value = null  
13. submit/reset buttons  
14. san serif fonts /
no mixed alignments
 
15. name, period, date, class  
Total  
 ___ 10 points
 
7. Optional – Complete the Online Practice Test  
8.

CH7 Quiz
Duration: 1/2 Period

Use the linked images to create a form to match the one shown.

thumb

thumb

Grading:
1. HTML Title  
2. Web Page Heading  
3. Form is within a table  
4. paragraph of text  
5. legend of the first fieldset  
6. check boxes  
7. legend of the second fieldset  
8. textarea  
9. submit/reset buttons  
10. san serif fonts  
11. 3 advantages of using a form  
12. name, period, date, class  
Total  
 ___ 15 points

 

Additional Resources

A. Online Textbook Resource
http://www.scsite.com/html3e/index.cfm?action=learn
B. Get and Post 1 - IT and communication by Jukka "Yucca" Korpela.
C. Get and Post 2 - All My FAQs Wiki: Difference between POST and GET
D. Get and Post 3 - FAQS.ORG
E. Get and Post 4 - GeekInterview.com
F. www.surveymonkey.com

top