Forms in HTML are used to collect data from the user and return it back to the server for processing or storage.  If you have used the World Wide Web for any length of time these days, chances are you have stumbled across forms.  In some cases, they are relatively simple: a single text area for entering your email address (to join an email list) or to enter a search criteria.  (For example, you can see an example on the Jones and Bartlett website).

Web-based forms however can be more complex that just a single text area.  They may include pull-down menus, buttons, selectable lists, radio buttons, checkboxes and other graphical items (called widgets, or GUI widgets).  We will start by creating a simple form for entering the quantity of a product a user would purchase via our web site.  Ideally, we will add this code to each of our product pages.  By doing so, we'll be creating the start of a shopping basket for our store.

It should be noted, however, that HTML forms reply on one or more programs on the web server to process the data received when the form is submitted.  Such a discussion is beyond the scope of these labs, and requires knowledge of programming and the administration of web servers.  Thus, for now, we will stick with building the form and explaining the tags needed.

To start, we need to use the form tags (<form>, </form>) to define the boundaries of the form on the web page.  The opening form tag also needs to have the action attribute defined, indicating which program will receive the form data and do the required processing.

Next, we would like to add two widgets to the form.  The first is a pull-down menu used to collect the quantity of a product the user wishes to add to their shopping cart.  The second widget will be a button used to "trigger" the action of adding the quantity of the displayed product to their shopping cart.

We create a pull down menu by using the select form tab (<select>).  To keep the data that this widget stores from being confused with other data on our form (especially when the form grows in size and becomes more complex), we will give this widget a name, "quantity", using the name attribute to specify a name with a widget.  We can also use the multiple attribute to indicate that more than one item in the pull-down menu can be selected at any time.  Since we do not wish to have this behavior in our menu, we will omit this attribute.  Finally, we need to tell the browser how many menu items are visible at a time.  The size attribute will be used to accomplish this.  Combining all of these tags and attributes, we can build the beginnings of our form with the following code:

<form action="http://someserver.com/cgi-bin/someprogram">
<select size="1" name="quantity">
</select>
</form>

While this seems pretty exciting, we are not quite there yet.  We have neglected to specify the menu items in the menu.  To accomplish this, we use the option tag repeatedly to specify the list of options in our menu.  Once we have our list of items (or options), we place the list inside of the select tags.

For our example, we will allow the user to choose the quantity of products to place in the shopping cart to between one and five.  We'll also insert a "trick" option (as the first item), which will be used to help prompt the user.  Now the code for our form looks like:

<form action="http://someserver.com/cgi-bin/someprogram">
    <select size="1" name="quantity">
        <option>Select quantity
        <option>1
        <option>2
        <option>3
        <option>4
        <option>5
    </select>
</form>

The result of our form is shown in Figure 1.

Quantity to add to cart: 1 2 3 4	Add Button
	Reset Button

Thus, we will modify our source code as follows:

<tr>
    <td colspan="2" align="center">
    <form action="http://someserver.com/cgi-bin/someprogram">
    <table align="center" width="100%">
        <tr>
            <td align="center" valign="middle" width="50%" rowspan="2">
            <label>Enter quantity to add to cart:</label><br>
            <input type="radio" name="quantity">1 scooper<br>
            <input type="radio" name="quantity">2 scoopers<br>
            <input type="radio" name="quantity">3 scoopers<br>
            <input type="radio" name="quantity">4 scoopers<br>
            </td>

            <td align="center" valign="middle"><input type="submit" name="submit" value="Add selected to cart"></td>
       </tr>

        <tr><td align="center" valign="middle"><input type="reset" name="reset" value="Reset choices"</td></tr>
   </table>
   </form>
   </td>
</tr>

These changes are reflected in a screen capture from Figure 4.  Note that if we wished to save even more space in our form, we could have used a select control for the user to enter the quantity!