CSC 104 Tutorial Notes
Bowen Hui
July 06th 2005

Recall from last time
=====================
- links 
  - image
  - global vs. local
  - within document
  - email

Introduction
============
- an HTML form is a section of a document 
- contains:
  regular HTML content
  controls
- users modify these controls
- entered data is processed upon submission

Overall Form
============
- form goes inside the body 
- processing goes inside the head (javascript, next time)
- <form name=X> </form>

Controls
========
- two general tags:
  - <input type=A name=X value=N>
  - <select name=X> 
      <option value=1>
      ...
      <option value=N>
    </select>

- checkbox
  - values toggle between on/off
  - e.g.:
    Popcorn Eating   <input type=checkbox name=q3 value=pe>
    Slumber Partying <input type=checkbox name=q3 value=sp>

- radio button
  - like checkboxes
  - values are mutually exclusive
  - e.g.:
    Yes  <input type=radio name=q1 value=yes>
    No   <input type=radio name=q1 value=no>

- text input
  - text field
  - e.g.:
    Reference Number: <input type=text name="userid" maxlength=3>

  - text area 
  - e.g.:
    Other Comments? <textarea cols=30 rows=5 wrap=on></textarea>

- menu
  - list of items to choose from
  - e.g.:
  <select name="q2">
    <option value="none">[select] 
    <option value="1">0-2
    <option value="2">3-6
    <option value="3">7-10    
    <option value="4">10+
  </select> 

- button
  - reset button
  - e.g.:
    <input type=reset  value="Clear">

  - submit button
  - works together with the <form> tag and parameters (more below)
  - e.g.:
    <input type=button value="Submit"> 

  - push button (requires further scripting)

Form Submission
===============
<form action=URI method=get|post> 
...
<input type=submit value="Send Now"> 
</form>

action
- specifies a form processing agent

URI
- uniform resource identifier
- includes URL
- e.g.:
  ftp://ftp.is.co.za/rfc/rfc1808.txt
  uses ftp scheme for File Transfer Protocol services

  gopher://spinaltap.micro.umn.edu/00/Weather/California/Los%20Angeles
  uses gopher scheme for Gopher and Gopher+ Protocol services

  http://www.math.uio.no/faq/compression-faq/part1.html
  uses http scheme for Hypertext Transfer Protocol services

  mailto:mduerst@ifi.unizh.ch 
  uses mailto scheme for electronic mail addresses

  news:comp.infosystems.www.servers.unix
  uses news scheme for USENET news groups and articles 

  telnet://melvyl.ucop.edu/
  uses telnet scheme for interactive services via the TELNET Protocol

method 
- specifies which HTTP method will be used to submit the form data set.

method=get
- with the HTTP "get" method, the form data set is appended to the uniform
  resource identifier (URI) specified by the action attribute (with a
  question-mark ("?") as separator) and this new URI is sent to the processing
  agent.

method=post
- with the HTTP "post" method, the form data set is included in
  the body of the form and sent to the processing agent.
- e.g.:
  <FORM action="http://server.com/cgi/handle"
        method="post">
  sends form data set to specified script 


Form Data Set
=============
element name = element value

- e.g.:
  userid=1&q1=yes&q2=1&q3=b&q3=pe&q4=a+f&q5=2%40ca&q6=Architect&comments=a+b%0D%0Ahere
                                    "a f"
                                           "2@ca"
                                                                "a b"
                                                                "here"