Tutorial 5: Working With Forms I

Tutorial 5: Working With Forms I
(The form)

The following tutorial presupposes that you have some familiarity with HTML authoring.
This an example of an exercise to be sent to the instructor's e-mail account.
This exercise can be adapted for other grammatical or communicational goals.
Click here to see the finished product: template5.html

In this first part we will create the web page with the form itself.
Go to Tutorial6 to learn how to create the corresponding CGI script that handles this form.

Some points to remember:

All form elements--text fields, radio buttons, etc.--must be within the <FORM></FORM> tags.
You can have several forms in one web page with different elements and functions.
The HTML syntax reviewed here covers only the basics of the forms. For a more complete information on extended form and form elements, consult your HTML manual or go to these Useful links.

Inside the <BODY></BODY> tags, insert an opening <FORM> tag with this syntax:

<FORM ACTION="/cgi-bin/jarana/template5.pl" METHOD="POST">

Where ACTION specifies the name of your CGI script (see Tutorial6).
You will have to substitute the path /cgi-bin/jarana/ for a valid path to your CGI script in your server: talk to your system administrator.
Now you can include both regular HTML and, most importantly, the form elements: pull-down menus, radio buttons, check boxes, "blanks" (text fields), text boxes, and push buttons:
In order for your CGI script to read your form elements, they must have a NAME and VALUE specified.
1. The basic syntax for the text field ("blank") is:
  <INPUT TYPE = "TEXT" NAME = "name_of_this_field" VALUE = "initial_value" SIZE = "size_in_characters">
  
  This will insert a text field in your HTML document showing a "blank" initially filled with the words "initial_value", which you will have to change to something else, or omit if you want the text field to appear blank.
  
  The NAME and the VALUE properties are used by the CGI to process the form.
2. The basic syntax for the pull-down menu is the following:
  
  <SELECT NAME = "name_of_the_menu">
     <OPTION VALUE = "value_of_option0">Option 0
     <OPTION VALUE = "value_of_option1">Option 1
     <OPTION VALUE = "value_of_option2">Option 2
  </SELECT>
  
  Where Option 0 is the one showing when the web page is loaded.
  The NAME and the VALUE properties are used by the CGI to process the form.
3. The basic syntax for the radio button is the following:
  <INPUT TYPE = "radio" NAME = "name_of_the button" VALUE = "value_of_first_ button">First button
  <INPUT TYPE = "radio" NAME = "name_of_the button" VALUE = "value_of_second_button">Second button
  
  If you want the user to make a choice from a set of radio buttons, their NAME should be the same.
  The NAME and the VALUE properties are used by the CGI to process the form.
  Radio buttons allow the user to make only one choice.
  
  First button
  Second button
4. The basic syntax for the check box is the following:
  
  <INPUT TYPE = "checkbox" NAME = "name_of_first_checkbox" VALUE = "value_of_ first_checkbox">Your first check box
  <INPUT TYPE = "checkbox" NAME = "name_of_second_checkbox" VALUE = "value_of_ second_checkbox">Your second check box
  
  The NAME and the VALUE properties are used by the CGI to process the form.
  Check boxes allow the user to make several choices.
  
  Your first check box
  Your second check box
5. The basic syntax for the text box is the following:
  
  <TEXTAREA NAME = "name_of_the_textbox"
  ROWS="number_of_rows" COLS="number_of_colums">You can have initial text here.</TEXTAREA>
  
  You can have initial text here.
6. The basic syntax for the submit push button is the following:
  
  <INPUT TYPE = "submit" NAME = "name_of_the_button" VALUE = "Submit">
  
  This is the button that sends your form to the server.
  You can change the VALUE property to a descriptive word, like "Send", "Send me this exercise", etc.
7. The basic syntax for the reset push button is the following:
  
  <INPUT TYPE = "reset" NAME = "name_of_the_button" VALUE = "Clear">
  
  This is the button that clears (erases) the entire form.
  You can change the VALUE property to a descriptive word, like "Clear", "Erase", "Do it again", etc.
These two buttons are placed at the end of the form, which you will have to close with the tag:

</FORM>
This takes care of the authoring of the forms in the HTML. Go now to the Tutorial 6: Working With Forms II (The CGI) to see how the form is processed and its data sent to your e-mail account..