Forms and CGI

• Sending data to the server
• Creating forms

Special Instructions for the Lab (Correction)

• Web server for this course runs on sigma10 on port 8000
• Unfortunately, this host is not externally accessible
• HTML files and CGI scripts must be a special directory

   ~<user>/course_html/

• CGI scripts must have the extension ".cgi"
• Assuming the time server script was called "localtime.cgi", the full URL on the sigma10 server would therfore be

   http://sigma10:8000/~<user>/localtime.cgi

• You must also set the permissions for both your home directory and the "course_html" directory to "711"

   > cd
   > chmod 711 .
   > chmod 711 course_html

Sending Data to the Server

• GET request - parameters are included in the query string portion of an URL and passed in the request line
• POST request - parameters are sent as the content of the HTTP request
• POST requests are typically generated by a form

Request Parameters

• Form elements correspond to request parameters

  <input type="checkbox" name="send_email" value="yes">

• If the checkbox is checked, the parameter "send_email" with value "yes" is sent to the web server
• The browser must encode form parameters before sending them to the browser
  • Collects names and values of form parameters
  • Replaces special characters in values with a "%" and hex code, and spaces with "+"
  • For example, "thanks for your help!" becomes "thanks+for+your+help%21"

A Sample Form

• Here is an example of a form

  <h1>Mailing List Registration</h1>
  <p>Please fill out this form to be notified about updates.
  <form action="register.cgi" method="POST">
    <p>
      Name: <input type="text" name="name"><br>
      Email: <input type="text" name="email">
    <hr>
      <input type="submit" value="Register">
  </form>

• Run the example

• When this form is submitted, the browser encodes the three form elements as:

  name=Joe+Cool&email=snoopy%40peanuts.com

Creating Forms

• All forms begin with <form> and end with </form>

  <form action="register.cgi" method="POST">
    .
    .
  </form>

• Submitting a form generates an HTTP request
  • Specify format of the request via attributes of the <form> tag
• A document can contain multiple forms, however, forms cannot be nested inside one another

Form Attributes

• ACTION
  Specifies the URL of the CGI script that should receive and process the HTTP request (defaults to current URL)

• METHOD
  Specifies the HTTP request method used to call the CGI script (defaults to GET)

• onSubmit
  A JavaScript handler, and specifes the JavaScript code that should be executed when the form is submitted

Input Elements

• The <input> tag generates a wide range of form elements
  • Text fields
  • Password fields
  • Hidden fields
  • Checkboxes
  • Radio buttons
  • Submit buttons
  • Reset buttons
  • Image buttons
  • Plain buttons
• General format of an input element:

   <input type="element_type" name="element_name" 
          value="default_value">

• TYPE
  Determines type of form element to display

• NAME
  Provides name of form parameter in the query string

• VALUE
  Meaning of this field depends on type of element

Text Fields

• Allow users to enter a line of data
• Default input type (if you omit TYPE attribute)
• Syntax of a text field:

   <input type="text" name="quantity" value="1"  
          size="3" maxlength="3">

• VALUE
  Default text displayed in the text field; user updates change this value

• SIZE
  Width of the text field (roughly number of characters)

• MAXLENGTH
  Maximum number of characters text field can hold

• onFocus, onBlur, onChange
  JavaScript handlers called when text field has focus (input cursor in field), loses focus, or field changes

Text Fields (Example)

<form action="http://sigma10:8000/~weiss/login.cgi" 
      method="GET">
<table>
<tr>
  <td>User:
  <td><input type="text" name="user">
<tr>
  <td>Password:
  <td><input type="password" name="secret">
<tr>
  <td><input type="submit" value="Login">
</table>
</form>

• Run the example

Password Fields

• Similar to a text field, except instead of displaying the value of the field, the value is masked
• Syntax of a password field:

  <input type="password" name="secret" 
         size="8" maxlength="8">

• Does not provide true security (not encrypted), only protection against someone seeing you enter the password
• All text field attributes apply to password fields

Hidden Fields

• Hidden fields are not visible to the user
• They are used to pass information between a series of forms and are typically generated by a CGI script
• Syntax of a hidden field:

  <input type="hidden" name="user" value="weiss">

• Hidden fields provide no security either (users can view hidden fields by viewing the HTML source)
• Hidden fields only use NAME and VALUE attributes
• More about hidden fields in Session Management

Checkboxes

• Allow users to select options
• Users can toggle between two states of a checkbox: checked or unchecked
• Syntax of a checkbox:

  <input type="checkbox" name="toppings" value="lettuce" 
         checked>Lettuce

• VALUE
  Value included in the request, if the checkbox is checked (default value is "ON", but this is not very useful)

• CHECKED
  Indicates that the checkbox should be selected by default

• onCheck
  JavaScript handler that should be executed when the checkbox is selected

• Checkboxes with the same name define a set of values

Checkboxes (Example)

<form action="http://sigma10:8000/~weiss/rate-movies.cgi" 
      method="POST">
Pick your favorite movie(s):

<p><input type="checkbox" name="movie"   
  value="paris">Paris Texas
<p><input type="checkbox" name="movie" 
  value="portrait">Malena
<p><input type="checkbox" name="movie" 
  value="beauty">American Beauty
<p><input type="checkbox" name="movie" 
  value="big">Big Chill
<p><input type="submit" value="Continue">
</form>

• Run the example

Radio Buttons

• Very similar to checkboxes, except that only one of the buttons in a set of radio buttons may be selected
• Syntax of a radio button:

  <input type="radio" name="main_course" 
         value="salmon">Salmon

• Radio buttons use the same attributes as checkboxes

Radio Buttons (Example)

<form action="http://sigma10:8000/~weiss/schedule.cgi" 
      method="POST">
Which day do you want to meet? 

<p><input type="radio" name="day"   
  value="mon">Monday
<p><input type="radio" name="day" 
  value="tue">Tuesday
<p><input type="radio" name="day" 
  value="wen">Wednesday
<p><input type="submit" value="Book Appointment">
</form>

• Run the example

Submit Buttons

• Submits the contents of the form to the server
• When the user clicks on a submit button, the browser
  • executes any associated onSubmit handler
  • formats an HTTP request according to the form method and encoding type
  • sends this request to the URL in the form action
• Syntax for a submit button:

  <input type="submit" name="submit_button" value="Submit the Form">

• VALUE
  Specifies both the label of the button and the value of this element when the form is submitted

• onClick
  JavaScript handler executed when the user clicks the button; returning false from this handler cancels the submit

• A form can have multiple submit buttons
  • Only the name and value of the submit button clicked will be included in the request

  <form action="http://sigma10:8000/~weiss/account.cgi" 
        method="POST">
  <p>You have the following options:
  <p><input type="submit" name="action" value="Add">
  <p><input type="submit" name="action" value="Delete">
  <p><input type="submit" name="action" value="Cancel">
  </form>

• Run the example

Reset Buttons

• Lets the user reset all elements in the form to state when page was loaded
• Does not send form's data to the server
• Syntax of a reset button:

  <input type="reset" value="Reset the form">

• VALUE
  Specifies the label that should appear on the button

• onClick
  JavaScript handler executed when the user clicks the button; returning false rom this handler cancels the reset

Image Buttons

• Image buttons function as submit buttons, but give you more flexibility over the look of the button
• Syntax for an image button:

  <input type="image" src="/icons/result.gif" 
         name="result">

• Browser sends coordinates where the user clicked the image in addition to the name of the button

  result.x=50&result.y=20

• SRC
  URL for the image displayed by the button

• onClick
  JavaScript handler executed when the user clicks the button; returning false rom this handler cancels the submit

Image Buttons (Example)

<form action="order.cgi" method="GET">
<input type="image" src="images/cake.jpg" name="choice">
</form>

• Run the example

• See the output

Plain Buttons

• Button with no special function
• Syntax of a plain button:

  <input type="button" value="Click here"
         onClick="alert(Hello!);">

• Because the plain button has no special action, it is only meaningful with an onClick attribute
• VALUE
  Specifies the label that should appear on the button

• onClick
  Code executed when the user clicks the button

  <form>
  <input type="button" value="Click here"
         onClick="alert('Hello!');">
  </form>

• Run the example

Selection Elements

• The <select> tag is used to create a list of options
• This list can be displayed in two ways:
  • a (pulldown) menu
  • a scrolling box
• SIZE
  Determines number of lines visible in the list

• MULTIPLE
  Allows user to select multiple values

Pulldown Menu (Example)

<form>
Choose a search engine:<br>
<select name="search" size="1">
  <option value="excite">Excite
  <option value="yahoo" selected>Yahoo
  <option value="altavista">AltaVista
  <option value="hotbot">HotBot
</select>
</form>

• Run the example

Scrolling Box (Example)

<form>
Choose the news channels you want to subscribe to:<br>
<select name="news" size="3" multiple>
  <option value="business">Business
  <option value="national">National
  <option value="international">International
  <option value="sports">Sports
  <option value="features">Features
</select>
</form>

• Run the example

Options

• Select does not have a value attribute
• Each of its possible values is specified via <option> tags
• Syntax of an option tag:

  <option value="AMEX">American Express</option>

• SELECTED
  Specifies that the option should be selected by default

• VALUE
  Value that is passed for the option if selected (defaults to text between the <option> tags)

Text Area Elements

• Creates a multi-line text input area
• Syntax for a text area:

  <form action="http://sigma10:8000/~weiss/feedback.cgi" method="POST">
  <p><textarea name="comments" rows="5" cols="40">
  Enter your comments here
  </textarea>
  <p><input type="submit" value="Feedback">
  </form>

• Run the example

• COLS
  Specifies width of the text area (in characters)

• ROWS
  Specifies number of lines the text area should display