Tutorial

TABLE OF CONTENTS
Introduction to Forms:

A Form is one of the many options available to an HTML programmer which provides a new dimension of interactivity between the owner and the user of a web document. In this part of our tutorial, we will take a look at the different types of form tags that a web author can use to collect form data from his/her users. Basically what we will do with this form data, is pass it to a CGI script, and manipulate the data any way we want. But that part comes later. First lets take a look at the different ways we can use HTML form tags...

HTML <Form> Tags:

The <form> and </form> tags tell your broswer where the beginning and end of your form is. Much like every other HTML tag, all attributes of your form will fit inside these two tags.

Along with the <form> tag, two more arguments are also included to specify to the browser what exactly to do with this form. For now, we will discuss these arguments, but we will see what they do later in the tutorial.

  • The first of these arguments is the method arguments. This argument determines how your data will be passed when the form is submitted. This is represented like so: <form method="GET"...> There are two basic types of the method argument these are GET and POST.
    • GET - will send the values of your form, and attach a query string to the end of the url. This would look something like this:
      http://www.cs.buffalo.edu/ ... /test.cgi?name=Dave&uname=solovey
    • POST - will only send the values of the form without attaching the request to the end of the url. This method would be the more favorable option if you didn't want to see the users what exactly you were keeping track of, or what arguments you were passing to your cgi script.
  • The second of the arguments included in the <form> tag is called the action argument. This argument simply tells the browser what script will be executed, or which url will be opened when the form is submitted.

    Here are a Few examples:
    • <FORM METHOD="POST" action="any_cgi_program.cgi">)
    • <FORM METHOD="POST" ACTION="mailto:solovey@cs.buffalo.edu">

 Input tag types:

From looking at the table of contents, one can see that there are many ways to represent data within a form. As to which type of data you are passing, HTML had to come up with another tag. Bingo!!! That's where the <INPUT...> tag comes into play in our HTML world. Here are some of the things that can be represented with your forms:

  • Plain Text
  • Hidden Text
  • Password Entry
  • List Box (selection)
  • Check Boxes
  • Radio Buttons
  • Memo Fields

Each of these different representations of input has it's own argument to the input tag. Through the utilization of the TYPE argument to the Input tag, a web author can specify how exactly he/she would like the user to input the data into the form...

This is the heart of form development. The <INPUT...> tag determines how the data is going to get inputted into your file, new document, or even your mailbox. Throughout the rest of this document, we will focus mostly on the types of input mechanisms used in form creation in your webpages.

Text Boxes:

Text Boxes are used for prompting a user to input a string of text. This string can be in the form of plain text or as a password entry ( substitutes * for actual characters). Here is an example of a text box which requires user input, and will send mail to a specific recipient.

Plain Text
(<INPUT TYPE="TEXT" NAME="TESTTEXT" MAXLENGTH="10" SIZE="10">)

Password Text
(<INPUT TYPE="PASSWORD" NAME="PASSWD" MAXLENGTH="10" SIZE="12">)

 List Boxes (aka drop down text boxes):

<SELECT NAME="variablename" SIZE=2 ALIGN=left>
<OPTION SELECTED>One One One
<OPTION>Two Two Two
<OPTION>Three Three
<OPTION>Four Four Four
</SELECT>

Choose your favorite Music Group
(note that the size determines the look of the selection box)

  • With a size of more than one but less than the total number of choices, a scroll bar will appear
  • And with a size of exactly the number of choices, no scroll bar will appear, and the use can just click on his/her selection
  • With a size of 1, the browser will give the user a list of options on the side when clicked

(Size smaller than number of elements)
<SELECT NAME="musicgroup" SIZE=3 ALIGN=LEFT>
(Exact Size)
<SELECT NAME="musicgroup" SIZE=4 ALIGN=LEFT>
(Size of 1)
<SELECT NAME="musicgroup" SIZE=1 ALIGN=LEFT>
Check Boxes:

A check box is a "Yes or No" type of input. If the box is checked on the form, the value of yes is assigned to the variable. In the case of HTML Forms, the variable will be passed with the value of "yes" if it has been checked, or " " (nothing at all) if it has not been checked.

The Check Box is created like so:

<INPUT NAME="check1" TYPE="CHECKBOX" VALUE="choice 1">I'll choose choice 1<BR>
<INPUT NAME="check2" TYPE="CHECKBOX" VALUE="choice 2">I'll choose choice 2<BR>

I'll choose choice 1
I'll choose choice 2

With a Check box, and its yes/no property, a user has the option of choosing as many as he/she wishes. (When Found in a group, each box is handled as a separate case)

Radio Buttons:

A Radio Button is a Form Element in which the user has a group of choices, and may only choose one of the group. In this case, all of the choices in the group contain the same variable name, and each will contain a different value which the variable will return when pressed. Here's an example of a group of radio buttons:

<INPUT NAME="radio1" TYPE="RADIO" ALIGN=LEFT VALUE="1"> choice 1
<INPUT NAME="radio1" TYPE="RADIO" ALIGN=LEFT VALUE="2"> choice 2
<INPUT NAME="radio1" TYPE="RADIO" ALIGN=LEFT VALUE="3"> choice 3
<INPUT NAME="radio1" TYPE="RADIO" ALIGN=LEFT VALUE="4" CHECKED> choice 4
<INPUT NAME="radio1" TYPE="RADIO" ALIGN=LEFT VALUE="5"> choice 5
<INPUT NAME="radio1" TYPE="RADIO" ALIGN=LEFT VALUE="6"> choice 6

choice 1
choice 2
choice 3
choice 4
choice 5
choice 6
A Default value may be selected by placing the word CHECKED inside the <INPUT...> tag. In the above example, the value of choice 4 has been selected as the default.

Memo Field ( <TEXTAREA> tag ):

A Memo Field is a way to inquire the user to input larger values of text into your HTML form. In this case, the user is given a larger area to work with as compared to the text box, and the option of multiple rows come into play. In a Memo Field, scroll bars may appear depending on the size of the Memo Field window. Here is how the Memo Field is set up like this:

<TEXTAREA NAME="comments" ROWS=5 COLS=40 ALIGN=LEFT></TEXTAREA><BR>


The TEXTAREA tag contains a few fields of its own. The ROWS and COLS attributes define obviously how many rows or columns will be displayed respectively. The TEXTAREA tag is unique in that it is the only one of the HTML Form tags that requires an ending tag. This is because the author of the page can set default text within the Memo Field by placing it between the begining and ending tags. Here's a small example of default text settings:

<TEXTAREA NAME="comments" ROWS=2 COLS=25 ALIGN=LEFT>
This is Default Text</TEXTAREA><BR>


Submit and Reset Buttons:

Our Final Stop in our HTML Forms Tag Tutorial is the Submit and Reset Button portion. A Submit button is basically a button that is "clicked" when the user has completed filling out the form. Upon clicking this submit button, the action defined in the <FORM... ACTION="actionname"> is carried out, which can be a script or mailto statement which specifies the directing of the input of the form. Here are a few samples of the different submit button properties:
(The Default Submit Button)
<INPUT TYPE="SUBMIT">

(Submit Button with text substituted in the Value Field)
<INPUT TYPE="SUBMIT" VALUE="Click Here to Submit>

(Submit Button in the form of an image)
<INPUT TYPE="IMAGE" SRC="clickherepost.gif>

A Reset button is constructed much like a submit button. A reset button will clear all form data entered in the form at the present time. This is useful if the user decided to change his/her answers, found an error in inputting data, or just decided to clear the input. Let's take a look at the Reset Button:


<INPUT TYPE="RESET">

<INPUT TYPE="RESET" VALUE="Push To Reset">

This concludes my tutorial on Forms in HTML. Now we're ready to learn how to deal with the information that has been submitted. (where it goes, how to break it up, what to do with it...)

solovey@cs.buffalo.edu