Griffin | Web Design
 
Resume Table of Contents  

Web Design
HTML

Chapter 6
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
  • 4 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 6/CH6 PowerPoint p. 285 - 316
2.

Lecture CH6

  • Introduction (286)
  • Creating Web Page Forms (289)
    • 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 6 Assignment
Duration: 1 Period

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

  • Creating a Form on a Web Page (294)
  • Adding Radio Buttons and a Textarea (299)
  • Submit and Reset Buttons (307)
  • Organizing a Form Using Form Groupings (309)

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

Ch 6 Data Files

home tour code

Here's what the data looks like when it's emailed:

data postdata

Sabatinaorderform1
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. name, period, date, class  
Total  
 ___ 10 points

Save sabatinasorderform.htm as sabatinasorderform2.htm then make the following changes:

  1. Move the form description below the image
  2. change the font to san-serif, size 12
  3. add an option of 'please choose' so no value is passed if nothing is selected and the form is submitted.

home tour

Sabatinaorderform2
Grading:
1. Change Fonts (Arial, size 12)  
2. default value = null  
3. item values vs lables  
4. name, period, date, class  
Total  
 ___ 5 points

Save sabatinasorderform2.htm as sabatinasorderform3.htm then make the following changes:

  1. Add tables inside the field sets.

home tour 3 code

Sabatinaorderform3
Grading:
1. Add Tables  
2. make it look purdy...  
3. New Fonts  
4. default value = null  
5. name, period, date, class  
Total  
 ___ 10 points

 

p. 295 - 315
4.

HTML GOLF SURVEY
Duration: 1 Period

p. xxx
 

1. GOLF SURVEY

Create the form in Dreamweaver shown below...

Notes:

  • Make the page look like mine!
  • Also type your name, Period, and date at the end of the Web page.

golf golf code

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 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
 
6. HTML Assignment
Duration: 2 Periods
 
 

Cases and Places - Case *: Your Own GOOGLE Form

Survey Steps:

  1. Create a Google Form at: http://www.google.com/forms/about/
  2. Include at lease 10 questions.
  3. Include at least one of:
    1. Text
    2. Paragraph text
    3. Multiple choice
    4. Checkboxes
    5. Choose from a list
    6. Scale
    7. Grid
  4. Make sure to check for proper grammar and spelling.
  5. Have at least 15 individuals complete the survey. A link on Facebook might be be a good way to
  6. Send a survey link to the instructor.
  7. Graph at least one part of the data.
  8. Show the survey results and graph to the instructor.
Grading:
1. Google Survey  
2. At least 10 questions  
3. At least 7 response types
 
4. default value = null  
5. At least 15 responses  
6. One response/question graphed  
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
G. www.google.com/forms/about/

top