|
Lesson Plan |
February 14, 2000Details
Reading / References
|
See how CGI scripts play a role with forms
Review various parts of an online form
Create form elements using HTML tags
Create a hidden field on a form
Work with form properties
Learn how to send data from a form to a CGI script
Work on sample problems.
Continue working on checkpoint #2.
From the New Perspectives HTML manual (tutorial #6): Work your way through the New Perspectives manual
for Tutorial #6 Work
your way through chapter 5 of the supplementary notes. Sample
problem (in this lesson plan)
Quick checks on pages 6.16, 6.29, and 6.40
Case problems #1 & #2 from pg 6.42 - 6.44
Work on checkpoint 2.
Reproduce the form including in this case problem.
Notes:
Each field should be individually named.
Each field should be sized in a similar fashion.
Posting should be to test server.
Use a table to align the controls.
Submission buttons at bottom are in their own row spanning 2 columns.
The answer is included at the end of this lesson plan - don't cheat!
Create the same feedback form in exercise #1, however, have the results go to the results frame.
Frames should constructed and named as follows:
Steps for form submission - page 86, HTML II
<FORM>, <FORM NAME=""> - Multiple Forms - pg 6.8, NP
No nesting
<FORM ACTION="url" METHOD=POST>…</FORM>
POST (stream) vs. GET (parameters)
Submit & Reset Buttons - <INPUT TYPE=SUBMIT|RESET VALUE="label">
Test Servers
http://hoohoo.ncsa.uiuc.edu/cgi-bin/post-query
Text Entry Fields
<INPUT NAME=""> - naming control
<INPUT SIZE=#> - field size
<INPUT MAXLENGTH=#> - entry restriction
<INPUT VALUE="default"> - default value
File Attachments
<INPUT TYPE=FILE>
Checkbox
<INPUT TYPE=CHECKBOX NAME="">
Labels
CHECKED
VALUE="checked" (on)
Multiple checkboxes
Radio
<INPUT NAME="groupname" TYPE=RADIO
VALUE="item#">
CHECKED
Password
<INPUT TYPE=PASSWORD NAME="pass">
Combo Box
<SELECT>…</SELECT>
<OPTION>
<OPTION SELECTED>
States of control
List Box
<SELECT SIZE=#> #>1
<SELECT MULTIPLE>
<OPTION SELECTED>
Free form
<TEXTAREA NAME="" ROWS=# COLS=#>…</TEXTAREA>
Default text between tags, all CRLFs count
Feedback form example.. J
Hidden Elements
<INPUT TYPE=HIDDEN NAME="" VALUE="">
Not really hidden
Image
<INPUT TYPE=IMAGE NAME=BC VALUE="BC">
Layout with tables
Using FRAMES
Using Mail
<FORM ACTION="mailto: address" METHOD=POST>
Translation programs - 6.39
Tab order - TABINDEX=# & NOTAB (IE4/5)
<HTML>
<HEAD>
</HEAD>
<BODY>
<FORM
METHOD=POST ACTION="http://hoohoo.ncsa.uiuc.edu/cgi-bin/post-query">
<TABLE>
<TR>
<TD WIDTH=100
ALIGN=RIGHT>Name</TD>
<TD><INPUT
NAME="firstname" SIZE=25 MAXLENGTH=25>
<INPUT
NAME="middleinitial" SIZE=2 MAXLENGTH=2>
<INPUT
NAME="lastname" SIZE=25 MAXLENGTH=25></TD>
</TR>
<TR>
<TD WIDTH=100
ALIGN=RIGHT>Address 1</TD>
<TD><INPUT
NAME="address1" SIZE=50 MAXLENGTH=50></TD>
</TR>
<TR>
<TD WIDTH=100
ALIGN=RIGHT>Address 2</TD>
<TD><INPUT
NAME="address2" SIZE=50 MAXLENGTH=50></TD>
</TR>
<TR>
<TD WIDTH=100
ALIGN=RIGHT>City</TD>
<TD><INPUT
NAME="city" MAXLENGTH=30 SIZE=30>
Prov
<INPUT NAME="prov" SIZE=2 MAXLENGTH=2>
</TD>
</TR>
<TR>
<TD WIDTH=100
ALIGN=RIGHT>Country</TD>
<TD><INPUT
NAME="country"> PC <INPUT NAME="pc" SIZE=8 MAXLENGTH=8></TD>
</TR>
<TR>
<TD WIDTH=100
ALIGN=RIGHT>email</TD>
<TD><INPUT
NAME="email" MAXLENGTH=30 SIZE=30></TD>
</TR>
<TR>
<TD COLSPAN=2
ALIGN=CENTER>
<BR>
<INPUT TYPE=SUBMIT
VALUE="Post it man!">
<INPUT TYPE=RESET
VALUE="Clear Form">
</TD>
</TR>
</TABLE>
</FORM>
</BODY>
</HTML>