HTML forms

1
HTML forms
2
Form elements

• Forms consist of
• Descriptions (explanation, instructions)
• Places to enter information
• free form (enter text)
• check boxes
• choose only one
• choose all that are appropriate
• selection lists (control size of the display
  area)
• choose one
• choose all that are appropriate
• Submit "button
• Clear form "button"

3
Form specific tags

• Within the body of an html document
• lt FORM ACTION"form processing application"
  METHODPOSTgt ...
• All the formatting appropriate to the form
• ltinput type submit valueClick here to
  submit gt
• lt/formgt
• It is possible to have more than one form on a
  page. Each must have a ltformgt tag and a submit
  tag.

4
Getting input from the user

• Forms exist to collect input from a user. The
  input is transmitted to a program to execute and
  a response comes back and is displayed for the
  user.
• lttextareagt -- described by attributes.
• lttextarea namecomments rows5
  cols40gtlt/textareagt -- there is a begin and end
  to this tag, but nothing appears between them.

5
Input types

• ltinputgt -- described by attributes.
• Examples
• Form activity buttons
• ltinput type " reset" VALUE "Clear the form"gt
• ltinput type "submit VALUESubmit the formgt
• Radio buttons, usually appear as list items
• ltulgt
• ltligtltinput typeradio namepetkind value
  CatsgtCats are great lt/ligt
• ltligtltinput type"radio" name"petkind"
  value"Dogs"gtI like dogslt/ligt
• lt/ulgt

6
Input - checkboxes

• Checkboxes allow more than one selection
• ltinput type checkbox name varnamegt
• Examples
• ltulgt
• ltligtltinput type"checkbox" name"jazz" gt Jazz
  lt/ligt
• ltligtltinput type"checkbox" name"classical"
  gtClassical lt/ligt
• lt/ulgt
• Unlike the radio boxes, each choice is a separate
  variable with a value of on or off.

7
Input -- scrolling list

• ltselect NAME"maincourse"gt ltoptiongtHamburgers
• ltoptiongtHot dogs
• ltoptiongtChicken
• ltoptiongtVegetarian meal
• lt/selectgt
• Other options in select are multiple and size.
  Multiple allows more than one choice to be
  selected. Size determines how many of the
  options are visible when the form is displayed.

8
Responding to the form

• !/usr/gnu/bin/perl
• print "Content-type text/html\n\n"
• print "ltHeadgtltTitlegtSurvey Echolt/Titlegtlt/Headgt\n"
  
• print "ltBODY BACKGROUND\"/mnt/a/cassel/html/gif.f
  iles/paper12.gif\" gt\n"
• print "ltCENTERgtltH3gtSurvey Echolt/H3gtlt/CENTERgtltHRgtltB
  Rgt\n"
• Get the input
• bufferltSTDINgt

9
Responding to the form - 2

• Split the name-value pairs
• _at_pairs split(//, buffer)
• foreach pair (_at_pairs)
• (name, value) split(//, pair)
• Un-Webify plus signs and -encoding
• value tr// /
• value s/(a-fA-F0-9a-fA-F0-9)/pack("C"
  , hex(1))/eg
• FORMname value

10
Responding to the form -3

• print "ltpgtlth4gtHello, FORMmyName, thanks for
  filling in our surveylt/h4gt"
• print "ltPgtlth5gtHere is a summary of your
  responseslt/h5gt"
• print "\n\n"
• print "ltigtYour favorite pets arelt/igt
  FORMpetkind"
• print "\nltpgt"

11
Responding to the form - 4

• print "ltpgt ltigtIn music, you like lt/igtltbrgt
  \\183\ "
• foreach pair (_at_pairs)
• (name, value) split(//, pair)
• if (value eq "on") print "name \\183\
  "
• print "\n"
• print "ltpgt ltigtYour meal choices arelt/igt
  FORMmaincourse ltigtorlt/igt
• FORMsecond.\n"

12
Responding to the form - 5

• print "ltpgt ltigtYour interests include the
  followinglt/igt ltbrgt"
• print "\\183\\n"
• foreach pair (_at_pairs)
• (name, value) split(//, pair)
• print "name value\n"
• value tr// /
• if (name eq "interests") print "value
  \\183\ "
• print "\n"
• print"ltpgt"

13
Responding to the form - 6

• print "ltigtHere is your commentlt/igtltpgt"
• print "FORMcomments"