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">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">The result of our form is shown in Figure 1.
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:
9.2 Other Form ElementsAs 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.
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.
9.3 Form PresentationClearly, 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:
Thus, we will modify our source code as follows:
<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!
9.4 Form ProcessingUp 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.
About the labs:
These labs were developed in conjunction with the Jones and Bartlett textbook Computer Science Illuminated by Nell Dale and John Lewis.
Lab content developed by Pete DePasquale and John Lewis.