Monday, Feb 2
Reading: Chapter 10 : O'Reilly, Chapter 4-5 : Seigel
FORMS: What and Why
- Structured Means to Obtain User Input :
- buttons
- check boxes
- pull-down menus
- text entry
- Input mechanism is supported by all graphic browsers.
- Provides standard interface to users.
- Very little client-side processing, really a server-side function.
- Server-side manipulation of the information is not standard.
- Usually use CGI's (Common Gateway Interface) for server-side processing.
- Forms can "return" dynamic pages - check fields, ask for clarification.
Forms Basics:
- Forms can appear anywhere within body of HTML document
- Layout of forms requires regular body tags (<BR>, etc.)
- All form data is sent when submitted by the user
- Two basic specifications:
- name of form's processing server (ACTION)
- method for sending parameters (ENCTYPE)
Form Example
<FORM> Tag
- Basic tag for outline of any form.
- Many things can go inside a single form.
<FORM ACTION=URL ENCTYPE =application/x-www-form-urlencoded | multipart/form-data METHOD = GET|POST > .... </FORM>
<INPUT> Tag
- plain text & password entries to a box
- checkboxes and buttons
- the submit button or reset button
- images, files or hidden stuff
<INPUT TYPE = text | password | checkbox |radio| submit | reset | image | file | hidden NAME = "property name" [VALUE = "initial value or label"] [CHECKED] [SIZE =#] [MAXLENGTH = #] [SRC = URL] [ALIGN = ] .....>
<TEXTAREA> Tag
- Larger area for text entry (comments or e-mail)
- You can set the height and width by rows and columns.
- Rows are wide, colums are fairly narrow.
- Text within tag is the default/initial text.
<TEXTAREA NAME = "property name" ROWS = # COLS = # [WRAP= off | physical | virtual] ...> .... </TEXTAREA>
<SELECT> Tag
- For Drop-down menus
<SELECT NAME = "property name" [SIZE = #] [MULTIPLE]> <OPTION [SELECTED] [VALUE="value"] ...> </OPTION> ...> ... </SELECT>
Look at the Form Source from before
Data: Encoding and Recieving
- Server has programs for recieving data stored in directory like "cgi-bin"
- the ACTION attribute of the form sends data to a program in this directory "cgi-bin/update"
- Encoding (ENCATYPE) keeps data from getting lost or scrambled.
- APPLICATION/X-WWW-FORM-URLENCODED
- MULTIPART/FORM-DATA
- TEXT/PLAIN
Application/x-www-form-urlencoded
- Standard & most common
- Spaces become "+" signs
- non alphanumerics become "%" plus ASCII code
- Carraige Returns = %0D%0A
-
So: Robin Hunicke University of Chicago AI Lab 1100 East 58th Chicago, IL 60637 Becomes: name=Robin+Hunicke%0D%0A&department=University+of+Chicago+AI+Lab%0D%0A &address=1100+East+58th&%0D%0AChicago,+IL%0D%0A60637
Multipart/Form-Data
- Breaks up data into fields of input
- Longer & more verbose
- Use only when sending files using the INPUT, TYPE=FILE tag.
- Must be used with the POST method.
- Best used with forms that contain a file-selection field
So: Robin Hunicke University of Chicago AI Lab 1100 East 58th Chicago, IL 60637 Becomes: ------------------------------18379739217392393917 Content-Disposition: form-data; name"=name" RobinHunicke ------------------------------18379739217392393917 Content-Disposition: form-data; name="department" University of Chicago AI Lab ------------------------------18379739217392393917 Content-Disposition: form-data; name="address" 1100 East 58th Chicago, IL 60637 ------------------------------18379739217392393917
Text/Plain
- For when you don't have access to a form-processing server
- use with form's ACTION attribute set to MAILTO
- each element on a single line, carraige returns and line feeds in ASCII
- easily readible, simply parsed (digested) by other tools.
- (you could use Word's find & replace to strip out the ASCII )
So: Robin Hunicke University of Chicago AI Lab 1100 East 58th Chicago, IL 60637 Becomes: name=Robin Hunicke department=University of Chicago AI Lab address=1100 East 58th%0D%0AChicago, IL%0D%0A60637
- GET : one stage - contact and send in the same step
- GET -- Good performance with small amounts ofdata
- GET is simpler to use (best for beginners)
- With GET, can invoke the server-side application without using a form. URL can be saved in bookmarks list, or included within an anchor as an HREF.
- Post : two stages - contact server, then send
- The extra stage makes POST better for advanced programmers
- Can use POST with many fields, or long text fields
- (if the operating system limits the number and length of command-line arguments.)
- For security use POST -- can be encrypted;
- GET puts the parameters right into the applicationURL,
- these paramaters can show up in server logs (credit card #s)
Checkboxes and Radio Buttons
- Buttons with same NAME attribute are members of a group.
- Checkbox: values of group submitted as a comma-separated string
Action Buttons
- SUBMIT, clickable image button -- send data to server
- Image button submits location clicked within image
- RESET -- resets form locally, without communicating to server
- SUBMIT can have a value, transmitted with form to server, can know which SUBMIT button pressed
(view the Source for this example)
AltaVista Form Example, with input
- AltaVista search for "Spice Girls":
- http://www.altavista.digital.com/cgi-bin/query?pg=q&what=web&fmt=.&q=%22Spice+Girls%22
- AltaVista Advanced Search: (more options = more fields)
- http://www.altavista.digital.com/cgi-bin/query?pg=aq&what=web&kl=XX&q=%22Spice+Girls%22&r=&d0=21%2FMar%2F86&d1=&search.x=50&search.y=4