• what are forms?
• common gateway interface
• form processing
• creating a form shell
• form elements
• submit/reset buttons

• forms allow web visitors to interact with you:
• give feedback
• leave a comment in a guestbook
• vote in a poll or survey
• buy stuff
• there are two basic parts to a form:
• the structure or shell that consists of fields, labels and buttons
• the processing script that takes that information and converts it into a format that you can read
• the shell part is fairly easy and similar to creating other parts of a web page, allowing you to create:
• text boxes
• larger text areas
• radio buttons
• check boxes
• drop-down menus
• processing data from a form is a bit more complicated...

• allows a web server to communicate with other programs running on server or outside the server
• can also enable web pages to be created on the fly, based on input from users
• scripts are essentially simplified programs written in perl or other scripting language (asp, php, c+, etc.)
• cgi falling out of favour in place of ASP, JSP or PHP - difference is these scripting languages allow code to be run as part of the web server instead of outside the server as a separate process; this reduces server load.

• each element on a form has a name and a value associated with it
• the name identifies the data that is being sent (e.g., visitor_name)
• the value is the data itself (e.g., dave)
• the value can come from the web designer (you) or from the visitor who enters data into a field
• when submit button is clicked, the name-value pair for each element (visitor_name=dave) is sent to the server
• script takes all the name value pairs and separates them out into something a human (or database) can understand
• two ways to send information to the server:
• get: appends name value to the end of an url (redirection, customization)
• post: sends a data file with the name-value pairs to the server (feedback, guestbooks)
• a script is executable - not a static file that does nothing; responds to input

• three important parts:
  • form tag which includes the url of the script that will process the form:

    <form method="post" action="script.url">

  • the form elements (fields, text areas)
  • submit button which sends the data to the script for processing

• text boxes
• contain one line of text
• typically used for names, addresses, email, etc.
• <input type="text" name="title" size="n" maxlength="n">
• default value for size attribute is 20, but visitors can add more text than fits in the box up to the value defined for "maxlength"
• larger text areas
• used in cases where you want to give the visitor more room to write
• common uses include comments and survey answers
• <textarea name="name" rows="n" cols="n" wrap>default text</textarea>
• visitors can enter up to 32,700 characters in a text area
• ie automatically wraps text even without the non-standard "wrap" attribute
• check boxes
• visitor can select as many as they like
• linked by the value of the "name" attribute
• <input type="checkbox" name="title" value="value">
• the above used for each check box in the set
• radio buttons
• can only select one from a group
• e.g., i live in canada or australia, not both
• <input type="radio" name="set" value="data">
• "data" is the text that will be sent to server
• select menu
• can select as may as they like, however one selection is the norm
• normally used as select menus for countries, state, province etc
• <select name="cars">
<option value="audi"></option>
• "audi" is the text that will be sent to server
• hidden elements
• used by the web designer (you) to store information from earlier forms or to send pre-determined variables to the cgi script
• <input type="hidden" name="name" value="value">

• forms are pretty much useless without a way to let the user send the information to you/the server
• <input type="submit" value="submit message">
• default submit message is "submit query"
• should also give visitors an easy way to clear the form and start over
• <input type="reset" value="reset message">
• default submit message is "reset"

Complete Number 11 in the Hands-On Exercises at the end of Chapter 9 in Web Development & Design Foundations. The exercise starts on page 388 and ends on page 389.

Note: you do not need to print the pages as directed — please upload the finished files to your web space and email your instructor with their location.

Exercise due in class in week ten.