Collecting Data Over the Internet Use of Forms and Email

1
Collecting Data Over the InternetUse of Forms
and Email

• Patrick R. Anderson MPH

2
About Me

• MPH, Epidemiology, San Diego State University.
• California Epidemiological Investigative Fellow
  96-97.
• Coordinator for a multi-country study 97-98.
• Currently serve as Distance Learning Coordinator
  98-present.
• Extensive information technology experience.

3
Learning Objectives

• Discuss data collection over the Internet.
• Introduce the use of forms.
• Introduce form attributes.
• Discuss how forms can be used to collect data.

4
Performance Objectives

• List methods to collect data over the Internet.
• Understand how forms can be used on a web site.
• Develop a working data collection form.

5
Why Use Internet?

• Potential for larger sample sizes.
• Data can be dumped directly into data bases.
• Edit features can be built into form to disallow
  incorrect entries.
• Most research institutions already have an
  Internet presence.
• Its simple.

6
Methods Used

• Custom Common Gateway Interface (CGI)
• Fading popularity as simpler techniques become
  standardized.
• Active Server Pages (ASP)
• Microsoft technology utilizing Visual Basic and
  VBScript embedded into web pages.
• http//msdn.microsoft.com/workshop/c-frame.htm -
  /workshop/server/Default.asp

7

• Cold fusion
• Proprietary software package used to develop
  websites.
• http//www.allaire.com/products/coldfusion/index.c
  fm
• Email
• Simplest method to use, though data must be
  manually entered into data base. Not necessary
  with other methods.

8
Forms

• Used to collect information.
• Collected data can be submitted to a data base,
  email or cgi script for processing.
• Embedded within a web page.
• Can utilize JavaScript and VBScript to
  incorporate logic checks.

9
ltFORMgt Element

• A form is enclosed between the ltFORMgt and lt/FORMgt
  tags.
• ltHTMLgt
• ltHEADgt
• ltTITLEgtForm Examplelt/TITLEgt
• lt/HEADgt
• ltBODYgt
• ltFORM ACTIONmailtoemail_address MethodPOSTgt
• Form field controls
• lt/FORMgt
• lt/BODYgt
• lt/HTMLgt

The form is one part of an entire HTML document.
10
Form Attributes

• ltForm ACTIONmailtoemail_address METHODpost
  ENCTYPEtext/plaingt.
• Use the ACTION attribute to submit to email.
• METHODpost is used when there is a large
  amount of data to send.
• ENCTYPEtext/plain attribute formats each form
  field to its own line.

11
Form Controls

• Form made up of a field of controls.
• Controls are manipulated by the user.
• Common controls include
• Text
• Multiple Line Text Area
• Pull-Down Menu
• Check Box
• Radio Button

12
Text

• Use to enter information such as name.
• Can set size, maximum length, default value and
  name of object for further reference.
• ltINPUT TYPETEXT NAMELname SIZE40
  MAXLENGTH45 VALUEEnter your last name
  heregt.
• Will produce the following when placed into an
  HTML document.

13
Multiple Line Text Area

• Use to enter information that can be long and
  varied.
• Can set number of rows, columns, and name of
  object for further reference.
• ltTEXTAREA NAMEResponse1 ROWS5 COLS40gt.
• Will produce the following when placed into an
  HTML document.

14
Pull Down Menu

• Used to allow for selection from a list.
• Can set number of selections allowed, number of
  selections shown, name of object for further
  reference.
• ltSELECT NAMEPosition MULTIPLE SIZE2gt
• ltOPTION VALUEDirectorgt
• ltOPTION VALUEHealth Officergt
• ltOPTION VALUEEpidemiologistgt
• lt/SELECT
• Will produce the following when placed into an
  HTML document.

15
Checkbox

• Used to allow for multiple selections from a set
  of visible choices.
• Name of related checkboxes must be the same.
• Director ltINPUT TYPECHECKBOX NAMEPosition1
  VALUEDirgt
• Health Officer ltINPUT TYPECHECKBOX
  NAMEPosition2 VALUEHOgt
• Epidemiologist ltINPUT TYPECHECKBOX
  NAMEPosition3 VALUEEpigt
• Will produce the following when placed into an
  HTML document.

16
Radio Buttons

• Used to allow for one selection from a set of
  visible choices.
• Name of related radio buttons must be the same.
• Director ltINPUT TYPERADIO NAMEPosition
  VALUEDirgt
• Health Officer ltINPUT TYPERADIO
  NAMEPosition VALUEHOgt
• Epidemiologist ltINPUT TYPERADIO
  NAMEPosition VALUEEpigt
• Will produce the following when placed into an
  HTML document.

17
Submit Buttons

• Used to submit the all the control fields within
  the form.
• Usually placed at the bottom of the form.
• ltINPUT TYPESUBMIT NAMESubmitButton
  VALUESubmit Buttongt
• Will produce the following when placed into an
  HTML document.

18
Reset Buttons

• Used to clear all the control fields within the
  form.
• Usually placed at the bottom of the form.
• ltINPUT TYPERESET NAMEResetButton
  VALUEReset Formgt
• Will produce the following when placed into an
  HTML document.

19
Complete Form Part1
lthtmlgt ltheadgt lttitlegtsample pagelt/titlegt lt/headgt lt
bodygt ltform method"POST" enctype"text/plain"
actionmailtopranders_at_mail.sdsu.edugt ltp
align"center"gtForm Example ltpgtPlease enter your
last namenbspnbspnbspnbspnbspnbspnbs
pnbspnbspnbsp ltINPUT NAME"Lname"
SIZE"23" MAXLENGTH"45"gt nbspnbspnbspnbsp
lt/pgt ltpgtPlease select your degree.nbspnbspnb
sp Select all that applylt/pgt ltpgtDr.PHltINPUT
TYPE"CHECKBOX" NAME"Degree1" VALUE"Dr.PH"gtnbsp
nbspnbsp Ph.D ltINPUT TYPE"CHECKBOX"
NAME"Degree2" VALUE"Ph.D"gtnbspnbspnbsp
MD ltINPUT TYPE"CHECKBOX" NAME"Degree3"
VALUE"MD"gtnbspnbspnbsp
20
MPH ltINPUT TYPE"CHECKBOX" NAME"Degree4"
VALUE"MPH"gt nbsplt/pgtltpgtPlease select your
positionnbspnbspnbsp Select only one
choice.lt/pgtltpgtnbspDirector ltINPUT
TYPE"RADIO" NAME"Position" VALUE"Dir"
checkedgt Health Officer ltINPUT TYPE"RADIO"
NAME"Position" VALUE"HO"gtEpidemiologist
ltINPUT TYPE"RADIO" NAME"Position"
VALUE"Epi"gtnbsplt/pgtltpgtPlease select your
interests.nbsp Hold down the shift key to
selectmultiple choices.nbsplt/pgt
Complete Form Part 2
21
Complete Form Part 3

• ltpgtltSELECT NAME"D1" MULTIPLE SIZE"2"gtltOPTION
  VALUE"MCH"gtMaternal and Child HealthltOPTION
  VALUE"EPI"gtEpidemiologyltOPTION
  VALUE"HE"gtHealth Education ltoption
  value"EH"gtEnvironmental Healthlt/optiongtlt/SELECTgt
  nbspnbspnbspnbsplt/pgtltpgtCommentslt/pgtltpgt
  ltTEXTAREA NAME"Response1" ROWS"5"
  COLS"40"gtlt/TEXTAREAgtlt/pgtltpgtltINPUT
  TYPE"SUBMIT" NAME"SubmitButton1"gtnbspnbspnb
  sp ltINPUT TYPE"RESET" NAME"SubmitButton"gtlt/pgt
  ltpgtnbsplt/pgtltpgtnbsplt/pgtlt/formgtlt/bodygtlt/html
  gt

22

• Incorporate the three previous slides into one
  file. Use notepad.
• Save the file to your hard drive as
  SamplePage.html.
• Open the page in either Netscape or Internet
  Explorer.
• You should see the following form which has been
  filled in and is ready for submittal.

23
(No Transcript)
24

• When the previous form is submitted all
  information will be sent to the recipient whose
  email is listed in the post section of the FORM
  attribute.
• ltform method"POST" enctype"text/plain"
  actionmailtopranders_at_mail.sdsu.edugt
• In this case is will go to the mail box for
  pranders_at_mail.sdsu.edu and will arrive in the
  following format.

25

• To pranders_at_mail.sdsu.edu
• Subject Form posted from Microsoft Internet
  Explorer
• LnameAnderson
• Degree2Ph.D
• Degree4MPH
• PositionEpi
• Response1Wow this is not that hard

26

• This indicates the submitters last name was
  Anderson.
• This person possesses two degrees
• Ph.D
• MPH
• Their current position is Epidemiologist
• (recall the value for Epidemiologist was Epi)
• Their comment was Wow this is not that hard.

27
Your Turn

• I encourage you to put together the form based
  on the code presented in slides 19-21. Utilize
  your email, then open it in a browser, fill in
  the fields and submit it.
• Go to your email and open the file that you will
  receive. Look at the responses in relation to
  the code. From this you will be able to modify
  the code to fit your questionnaire.
• To learn the HTML to modify the form go to the
  following sites.

28

• http//www.ncsa.uiuc.edu/General/Internet/WWW/HTML
  Primer.html
• http//junior.apk.net/jbarta/tutor/forms/
• http//www.idocs.com/tags/forms/
• http//www.utoronto.ca/webdocs/HTMLdocs/NewHTML/ht
  mlindex.html
• http//www.insidedhtml.com/html/form.asp
• http//hatbox.do.losrios.cc.ca.us/fichera/8e/
• http//www.jmu.edu/computing/workshop/forms/
• http//www.ug.bcc.bilkent.edu.tr/WWW/tutorial/HTML
  /

29
Good LuckSee You in Cyber Space