• 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 a scripting language (php, perl, python, etc.)
• cgi falling out of favour in place of server-side scripting - 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.
• More on Common Gateway Interface

• 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" id="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" id="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" id="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" id="radio1" 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 6 in the Hands-On Exercises at the end of Chapter 9 in Web Development & Design Foundations, 7th ed. The exercise starts on page 420.

• Create the Music Survey form in Figure 9.38 as specified
• Have the form submit to URL http://webdevbasics.net/scripts/demo.php using the post method.
• Ignore the directive to include your name and email address at the bottom of the page. It's optional, as instructor will be able to identify your work via submission-by-email approach used in the course.
• Style your form with CSS instead of using "the traditional" table approach. Both "the traditional" approach and the CSS approach are covered in chapter 9.

Exercise due in class in week ten.