Program Development

1
HTML Section 6
Forms
6.02

• Forms
• HTML tags define data input and/or output
• Define the Input and/or Output on the web page
• Do not process the data
• Numerous HTML tags for various functions
• Text boxes
• List Boxes (drop down)
• Radio Buttons
• Check Boxes
• Text Areas
• Submit Button
• Reset Button
• 1. Design the form (Figure 6-1, Page 6.04)
• 2. The completed web page with the form (Figure
  6-2, Page 6.05)
• 3. The HTML tags required for the Form (Figure
  6-3, Page 6.07)

2
HTML Section 6
Common Gateway Interface (CGI) scripts Processes
the data sent from an HTML form Returns
information to the user via an HTML page Run on
the web server Language can be OS specific Data
manipulation (comparisons, arithmetic) Database
manipulation Languages AppleScript
Apple Active Server Pages (ASP)
Microsoft C/C Perl free UNIX shells
various vendors Visual Basic Microsoft PHP/FI
free JavaScript Sun Microsystems VBScript
3
HTML Section 6
http//www.pifergolf.com/ Object types
used Text Textarea Checkbox Submit
Button Reset Button
4
HTML Section 6
Form Tags Input attributes (Figure 6-6, Page
6.09) ltinput typetext sizenumber
namefieldnamegt text - Single line
input area defined Text scrolls when field is
filled size width of the text field name
name of field passed to cgi script More
Attributes Maxlength number max length of field
no scrolling even if size is
larger scrolling if size is smaller Value
some value default value to text box
5
HTML Section 6
Create a blank HTML page named forms.htm Enter
the ltinputgt tag between the ltbodygt and lt/bodygt
tags ltinput typetextgtltinput
typetextgt ltbrgt ltinput typetextgt Save the
file Load into browser
6
HTML Section 6
Selection Lists (Drop Boxes) Create unlimited
length of selections (list) Only one item at a
time will be selected Width is determined by the
longest list item Length of list is determined by
number of items in list ltform method"post
actionsomescript"gt ltselectgt begin list
ltoptiongtsomedata an item in the list as many
ltoptiongt as required lt/selectgt end of
list lt/formgt Attribute Size number of items
to display before scrolling Multiple allow more
than one item to be selected LAB 1 Create a
Drop Down Box Somewhere In Time Predator Aliens
The Shootist Patton GloryHideway Falling
Down Die HardBraveheart Titanic Instinct
7
HTML Section 6
6.27
Selection Lists Grouping (Drop Boxes) Create
Headings for sections Create unlimited length of
selections (list) Only one item at a time will be
selected Width is determined by the longest list
item Length of list is determined by number of
items in list Headings cannot be selected ltform
method"post actionsomescript"gt ltselectgt begi
n list ltoptgroup labelRoutersgt
ltoptiongt an item in the list as many
ltoptiongt as required lt/optgroupgt ltoptgroup
labelSwitchesgt as many ltoptiongt as
required lt/optgroupgt ltoptgroup
labelAdaptersgt as many ltoptiongt as
required lt/optgroupgt lt/selectgt end of
list lt/formgt
8
HTML Section 6
LAB 2 Create a Drop Down Box with
Headings CDsSomewhere In TimePredatorAliensMO
VIESThe ShootistPattonGloryHidewayFalling
DownVHSDie HardBraveheartTitanicInstinct
9
HTML Section 6
6.28
Radio Buttons Only one button can be selected at
a time ltform method"post actionsomescript"gt lt
input type"radio" name"name1"
value"toscript1"gt Label 1 As many radio buttons
as needed lt/formgt LAB 3 Create Radio
Buttons Very Small Small Medium Large Extra Large
10
HTML Section 6
6.31
Group Box Radio Buttons Only one button can be
selected at a time ltform method"post
actionsomescript"gt ltfieldsetgt ltlegend
aligntopgtsomeheadinglt/legendgt ltinput
type"radio" name"name1" value"toscript1"gt
Label 1 As many radio buttons as
needed lt/fieldsetgt lt/formgt Assign one item as a
default selection Attribute checked ltinput
type"radio" name"name1" value"toscript1
checkedgt Label 1 LAB 3 Create Radio
Buttons Very Small Small Medium Large Extra Large
11
HTML Section 6
6.33
Check Boxes Select as many boxes as
necessary ltform method"post actionsomescript"
gt ltinput typecheckbox" name"name1"
value"toscript1"gt Label 1 As many boxes as
needed lt/formgt LAB 4 Create Check
Boxes Sweater Coat Jacket Sweat Shirt Hat
12
HTML Section 6
6.35
Text Area (mutiple lines) ltform method"post
actionsomescript"gt lttextarea name"name1"
rowsvalue colsvaluegtdefault text
lt/textareagt lt/formgt Auto word wrapping Scrolling
LAB 5 Create a Text Area Five rows 30
columns Default text of Enter comment here
13
HTML Section 6
6.39
Submit the form data ltform method"post
actionsomescript"gt ltinput typesubmit
valuename on buttongt lt/formgt Built in browser
object Submits form information to cgi
script Clear the form ltform method"post
actionsomescript"gt ltinput typereset
valueClear Screengt lt/formgt Built in browser
object Clears/resets the form information LAB 6
Create a Submit and Reset button
14
HTML Section 6
6.42
Buttons ltform method"post actionsomescript"gt
ltbutton namename1 typebuttongt Button
specifications lt/buttongt lt/formgt LAB 7 Create
a button ltbutton name"name1" type"button"gt ltimg
src"awards1.gif" align"absmiddle"gt See our
ltfont color"maroon"gtltbgtHistory
Pagelt/bgtlt/fontgt lt/buttongt
15
HTML Section 6
6.43
Image Fields ltform method"post
actionsomescript"gt ltinput typeimage
srcimageurl nametext valuetextgt lt/formgt
LAB 8 Create an image submit button ltform
method"post" action"contactformasp.asp"gt ltinput
typeimage srcawards1.gif namegobutton
valuesomevaluegt lt/formgt
16
HTML Section 6
6.44
Hidden fields ltform method"post
actionsomescript"gt ltinput typehidden
nametext valuetextgt lt/formgt ltinput
typehidden nameemail valuemorris.fulcher_at_b
aker.edugt
17
HTML Section 6
6.44
Submit the form to the cgi script ltform
method"post actionsomescript"gt codes lt/formgt
Method the way in which the data is
transferred Get Data is attached
to the end of the call to the script
Data is visible in the call url location window
Data is limited to 255 characters
Post Data is sent separately from the
script call Data is not visible
Amount of data is not limited to 255
characters Safest method to send
data Action the name of the script
18
ltform method"post" action"contactformasp.asp"gt lt
tablegt lttbodygt lttrgt lttdgtltbgtltfont
color"Maroon"gtNamelt/fontgtlt/bgtlt/tdgt lttdgtltinput
name"name" type"text" size25gtlt/tdgt lt/trgt lttrgt
lttdgtltbgtltfont color"Maroon"gtEmail Address
lt/fontgtlt/bgtlt/tdgt lttdgtltinput name"emailaddress"
type"text" size25gtlt/tdgt lt/trgt lttrgt lttdgtltbgtltfon
t color"Maroon"gtPhone Number lt/fontgtlt/bgtlt/tdgt ltt
dgtltinput name"phone" type"text"
size25gtlt/tdgt lt/trgt lttrgt lttdgtltbgtltfont
color"Maroon"gtEnter request or comment
lt/fontgtlt/bgtlt/tdgt lttdgtlttextarea name"textdata"
rows6 cols45 wrapgtlt/textareagtlt/tdgt lt/trgt lttrgt lt
tdgtltbgtltfont color"Maroon"gtlt/fontgtlt/bgtlt/tdgt lttdgtlti
nput name"toemail" type"hidden"
value"escsrvs_at_aol.com"gtlt/tdgt lt/trgt lt/tbodygt lt/ta
blegt
19
ltbrgtltbrgt lt!-- ltfont color"Navy"gtltbgtPlease
select any items of interestlt/bgtlt/fontgtltbrgt lttabl
egt lttbodygt lttrgt lttd alignrightgtPurchase New Golf
Cartlt/tdgt lttdgtltinput type"checkbox"
name"newgolfcart" value"yes"gtlt/tdgt lttd
width35gtlt/tdgt lttd alignrightgtPurchase Used Golf
Cart lt/tdgt lttdgtltinput type"checkbox"
name"usedgolfcart" value"yes"gtlt/tdgt lt/trgt lttrgt
lttd alignrightgtLease New Golf Cart
lt/tdgt lttdgtltinput type"checkbox"
name"leasenewgolfcart" value"yes"gtlt/tdgt lttd
width35gtlt/tdgt lttd alignrightgtGolf Cart
Partslt/tdgt lttdgtltinput type"checkbox"
name"golfcartparts" value"yes"gtlt/tdgt lt/trgt lt/tb
odygt lt/tablegt --gt ltbrgtltbrgt ltinput type"submit"
value"Submit"gt ltinput type"reset"
value"Clear/Reset"gt lt/formgt