Computer Science Illuminated, Third Edition

eLearning

Animated Flashcards
Live Wire
Cryptic Crossword Puzzles
Ethical Issues
Biographical Sketches
Did You Know
Goin Live
Google Code Digital Lab Manual
Online Glossary
The Learning Store
Language Library
Download PEP/7
Instructor Resources
Student Resources

eLearning Home

Lab #9

Forms


9.1 Creating Forms

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.

Figure 1: The pull-down menu in our web form.

Next we will add the Add to cart button to our form.  The user will click this button to signify that the selected quantity of the product being displayed will be placed in their electronic shopping cart.

Clickable buttons are in a class of HTML form widgets known as input widgets.  Later in this lab, we will cover additional input widgets including text fields, checkboxes, and radio buttons.  To create the button (known as an action button), we shall use the input tag with  several attributes.  The attributes are summarized below along with the value we intend to use in our example:
  • type - the type attribute specifies which input widget this will be.  In our case, the value "submit" will be specified to create the submit button.
  • value - the value attribute specifies the label of the button when displayed to the user in the web browser.  Since we would like our button to read "Add to cart", this will be the value for this attribute that we will use.
  • name - the name attribute (used again here) helps us keep track of the data stored by this widget (the label of the button), thus, we'll call it "submit_quantity".
The following code reflects our addition of the action button to the form, and Figure 2 displays just the contents of the form (which we will soon add to our product pages).  Note that the input tag does not have a closing tag, and that we included an additional HTML tag between the form elements to help visually separate them.
<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>
<br><br>
<input type="submit" value="Add to cart" name="submit_quantity">
</form>


Figure 2: The pull-down menu and action button in our web form.

Lab Activity #1:
Add a web form to one or more of the web pages that you have created.

Be sure to stick (for now) with the pull-down menu and submit button demonstrated above.  However, try changing the value of the size attribute of the select tag.

When it is set to a value larger than the number of items in your list, what happens?

9.2 Other Form Elements

As you may have guessed, there are many additional types of form elements (widgets) that can be used in creating your forms.  In the table below, we have listed 10 additional elements, a short description of each, their corresponding tags, attributes and value types, as well as an example.

Element Name
Description
HTML Tag
Attributes & Values
Example
Text field
Handles a single line of text
<input type="text">
name - name of the control (character string)
value - initial value of the control (character string)
size - width of the control in number of characters (integer value)
maxlength - maximum number of characters the user can type (integer value)
Password field
Text field with masking characters applied (to hide a typed password)
<input type="password">
name - name of the control (character string)
value - initial value of the control (character string)
size - width of the control in number of characters (integer value)
maxlength - maximum number of characters the user can type (integer value)

Checkbox
On/Off switch - can share name attribute to create a multiple selection group
<input type="checkbox"
name - name of the control (character string)
value - initial value of the control (character string)
size - width of the control in pixels (integer value)
checked - indicates that the checkbox is "on" (accepts no value)
Choice 1
Choice 2
Choice 3
Choice 4

Radio button
On/Off switch - can share name attribute to create a mutually exclusive group
<input type="radio">
name - name of the control (character string)
value - initial value of the control (character string)
size - width of the control in pixels (integer value)
checked - indicates that the checkbox is "on" (accepts no value)
Radio button 1
Radio button 2
Radio button 3
Radio button 4

Reset
Button that resets all form controls to their initial values
<input type="reset">
name - name of the control (character string)
value - label displayed on button (character string)
size - width of the button in pixels (integer value)

File
Button which permits the user to select (and upload) a file from their computer
<input type="file">
name - name of the control (character string)
value - label displayed on button (character string)
size - width of the button in pixels (integer value)

Hidden
Invisible value which is never displayed.  Generally used to pass a "hidden" value back to the server.
<input type="hidden">
name - name of the control (character string)
value - value stored by the hidden control (character string)
Never displayed!
Image
A submit button with a graphic image on the face of the button.
<input type="image">
name - name of the control (character string)
value - initial value of the control (character string)
size - width of the control in pixels (integer value)
src - the location of the image file to be placed on  the front of the button (character string, URL)
alt - alternate text to be displayed if the image is not located (character string)

Text area
A multi-line text field control.
<textarea>
Initial value
</textarea>
name - name of the control (character string)
rows - number of rows of visible text displayed to the user (integer value)
cols - number of columns of visible text displayed to the user (integer value)
readonly - makes the textarea uneditable by the user (accepts no value)

Label
A text-based label associated with a control.
<label>
Label string
</label>
none significant


Using several of the controls listed above (label, reset, and radio buttons), we will modify our product pages' HTML forms to provide a more enhanced shopping basket.  The code modifications are show next, along with a screen capture of the modified Litter Scooper product page in Figure 3.
<html>
<head>
<title>
Pete's Pet Store</title>
</head>
<body>
<table border="1" cellpadding="10">
<tr>
    <td align="center" valign="center"><img src="scooper.jpg" border="2" alt="Closeup of litter scooper"></td>
    <td><b>
Item:</b> 23445-444<br><br><h3>Cat Litter Scooper &reg;</h3></td></tr>
   
<tr>
    <td colspan="2">
    <table align="center">
        <tr>
            <td><p><b>
Description:</b></td></tr>
        <tr>
            <td><blockquote>
Got a cat?  Well then, you need one of these!  Our pre-used cat litter scooper is just the thing for those budget conscience owners looking to cut corners.  We've bought into a massive supply of <i>used</i> litter scoopers like the one shown here, and we've priced them to move quickly!</blockquote></td></tr>
        <tr>
            <td><blockquote>
Our sturdy scoopers are 100% plastic and feature a wide collection area with parallel slots to allow for easy filtering action.  Each scooper comes pre-cleaned and ready to handle your toughest litter box needs!</blockquote></td></tr>
    </table>
    </td></tr>
   
<tr>
    <td colspan="2" align="center">
        <form action="http://someserver.com/cgi-bin/someprogram">
        <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>
        <br><br>
        <input type="submit" name="submit" value="Add selected to cart"><br>
        <br><br>
        <input type="reset" name="reset" value="Reset choices"><br>
        <br><br>
        </form>
    </td></tr>
</table>

<hr width="30%" align="left">
<b>
Price:</b> $2.95
<hr>
Pete's Pet Store
<i>&copy; 2002</i>
</body>
</html>

Adding a form to our product pages.
Figure 3: Adding a form to our product pages.

Lab Activity #2:
Create web form to survey visitors to your site.  Utilize the following form elements in your survey:
  • text field
  • text area
  • label
  • checkboxes
  • radio buttons
  • reset button
  • submit button

9.3 Form Presentation

Clearly, the amount of space our form takes up is rather large.  In fact, as you can see from Figure 3, it's nearly the same amount of space as the product photo, name, and description.  What we need to address now is how the form is presented, or laid out, to the user.

We can (and should!) take advantage of the fact that a table can contain a form, and that a table can be nested inside of another table.  By using a table, we can control how the form is presented, therefore taking advantage of the extra horizontal space we were left with after our first attempt.

Ideally, we would like to have a two-row, two-column table that will contain all of the form elements. This table would be located just below the product description row.  Thus, we will nest a table that is 2x2 (two rows and two columns) in a new row of the main table on each product page.  The left most column will have its cells merged (vertically) with the label and checkboxes being placed in that column, while each remaining form button will be placed in its own cell in the right-most column.  For example, we wish the resulting form to look like:
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!

Form layout using a table.
Figure 4: Form layout using a table.

Lab Activity #3:
Enhance your HTML form by using one or more tables to control how the form is presented to the user.

9.4 Form Processing

Up to this point, we have concentrated on building our forms in HTML.  As we eluded to earlier, forms handle data input from the user browsing the web page.  Generally speaking, data entered by the user must be sent back to the server for processing, as a web page is meant for display and data capture only.

In terms of our running example of a pet store, our server must receive the data entered by the user, process it, possibly store it, and hopefully do something useful with it.  The server which handles the pet store must be prepared to create a shopping cart for each user that may view the web page.  Additionally, if we were to fully develop this on-line pet store, we would want to provide the ability for the user to edit their shopping cart (add items, remove items, etc.) and then check out.  Checking out would involve entering shipping information, payment information, and possibly obtaining shipping preferences (overnight, 2-3 day, etc.).

All of this data would be entered by the user in presumably one or more HTML forms on one or more HTML pages.  Once completed, the server would conduct a financial transaction with a bank (to check the user's credit card), print out an invoice to be filled, and store the entire transaction so that it can be referenced if needed (by a customer service representative, for example).  Obviously that is quite a bit of work.

The programs that handle all of these tasks are known as CGIs (or Common Gateway Interface programs).  They can be written in many languages, such as Perl, Java, or PHP.  The development of such CGI programs is beyond the scope of these labs, however many web servers will allow for the development of CGI programs.  (If you are interested in developing a CGI program to tie into your HTML form, check first with your web server's administrator to see if you are permitted to do so.  In some cases, pre-configured CGI scripts are available for you to use, provided by the administration.)

CGI programs can be dangerous though, the result of submitting a form means that a program is executed by the server.  This can be potentially dangerous in terms of computer security.  Generally, web administrators won't allow untrusted CGI programs on their web servers for fear of potential security issues.

Lab Activity #4:
Talk to the web administrator for your department/school where you will publish your web pages.

What is their name?   __________________________________


Do they support the use of CGI programs? _________________

If so, what programming or script languages are permitted or encouraged? ________________________________________



About the labs:
These labs were developed in conjunction with the Jones and Bartlett textbook Computer Science Illuminated by Nell Dale and John Lewis.
ISBN:  0-7637-1760-6
Lab content developed by Pete DePasquale and John Lewis.

 
Educators: More Information About This Text Other Computer Science Titles at Jones and Bartlett
Copyright 2019 Jones and Bartlett PublishersContact webmaster