A Brief Introduction to HTML Forms

Forms allow HTML documents to become interactive. Users can input information which can be manipulated locally or sent to a server. In particular, forms act as the front-ends to CGI scripts and Javascript. As such, before one can begin to use CGI, it is useful to get a handle on Web forms. This page briefly introduces the basics of Web forms.


The Form Tag

As with all HTML coding, forms are created using tags. The first, and most important, is the <FORM> tag.
The <FORM> tag requires both an opening and a closing tag, and at a minimum requires the action attribute. This action attribute specifies what the form should do with the data when it is submitted. For the most part this will be the URL of some CGI script, but other values are possible.
So, here is what it looks like in your HTML document:

<FORM action="http://www.gslis.utexas.edu/cgi-bin/test.cgi">
Insert lots of neat form elements here, including a submit button
</FORM>


The Input Tag

Within those opening and closing form tags, you can put a variety of input entities or elements. Each form element is created using a tag and usually several attributes. We will proceed from the relatively simple elements to the somewhat complex. The simplest elements, appropriately enough, are created using the <INPUT> tag. Unlike the <FORM> tag, <INPUT> does not need a closing tag, but it almost always requires at least two attributes. First, the type attribute determines what type of input element will be created. Second, the name attribute gives the input element a name. How we define these two attributes affects the behavior and further options of our input element.
It is important to understand what the name attribute does. It gives form elements a unique identifier. When our form is passed to a CGI script we access the values from the form based on these names. These names can be anything we like, but it is useful to use a short description of the value being collected. Thus, if we are getting someone's age, it only makes sense that the name of that form element be "age." The use of the name attribute should become clearer as we proceed.


The SUBMIT and RESET Buttons

The most basic and important input element is the submit button. In fact, it does not even require us to give it a name. Thus, we can create a submit button with the following HTML:

<INPUT type="submit">

which gives us the following:

If we wish to change the text on the button, we can use the value attribute, like follows:

<INPUT type="submit" value="Send in those values">

To get:

The converse of the SUBMIT Button is the RESET Button, which clears out any values entered into the form. It also does not require a name. So we can simply type in:

<INPUT type="reset">

To get:

Again, we can change the value attribute to change the text on the reset button.


Text and Password Entries

To create a text entry input we specify <INPUT type="text" name="variablename"> which yields:

We may additionally set a default value for the text entry using the value attribute.
<INPUT type="text" name="variablename2" value="Sample">:

We can also change the length of our text entry using the size attribute.
<INPUT type="text" name="variablename3" value="Sample" size="7">:

Finally, we can limit the length of the value the user types in using the maxlength attribute.
<INPUT type="text" name="variablename4" value="Sample" size="7" maxlength="7">: (Try to type in more text and you won't get very far)

The password entry (type="password") functions the same way as the test entry, and takes the same attributes (other than type). The difference is that characters entered are masked by some other character (usually an asterisk).
Thus <INPUT type="password" name="variablename5" value="Sample"> appears as


Checkboxes and Radiobuttons

Checkboxes allow the user to select multiple items in a query. Unlike the input elements described above, however, creating checkboxes is more complicated than a single tag. In order to create a series of checkboxes, you have to create a tag for each box individually. In addition, each box requires both a name and value attribute. What links these boxes together is that you specify the name attribute to be the same for each box.

For example, the following code presents a classic example:

What would you like on your pizza:
<INPUT type="checkbox" name="toppings" value="Pineapple"> Pineapple
<INPUT type="checkbox" name="toppings" value="Sausage"> Sausage
<INPUT type="checkbox" name="toppings" value="Jalapeños">Jalapeños
<INPUT type="checkbox" name="toppings" value="Pepperoni"> Pepperoni
Which appears as:

What would you like on your pizza:
Pineapple
Sausage
Jalapaños
Pepperoni


Radiobuttons act in a similar fashion to checkboxes, but only allow the user to select one value. In other words, choosing one radio button excludes choosing other radio buttons. Again, each button must be created with its own tag and must have name and value attributes. To modify our example from above, say we had specifically ordered a one-topping pizza. Now our code looks like:

What would you like on your pizza:
<INPUT type="radio" name="topping" value="Pineapple"> Pineapple
<INPUT type="radio" name="topping" value="Sausage"> Sausage
<INPUT type="radio" name="topping" value="Jalapeños">Jalapeños
<INPUT type="radio" name="topping" value="Pepperoni"> Pepperoni
(Note that I have changed the name attribute to "topping" so as not to interfere with the checkboxes above)

Which appears as:

What would you like on your pizza:
Pineapple
Sausage
Jalapeños
Pepperoni




The Hidden Input

One final input type that can be useful is the hidden type. As its name suggest, the hidden entry is not displayed by the browser, but it can be useful to set values that the user doesn't really need to see. Note, however that hidden values can still be seen when viewing the document source and should not be considered truly "secret." To illustrate (or not as the case may be):

<INPUT type="hidden" name="hiddenvalue" value="ssh">

yields:



Sort of anti-climactic, but if you look at the source code, you'll see it's there.


Drop Down Menus and Selection Boxes

Drop down menus and selection boxes provide a compact way to list a series of choices. Depending on the context, the user can select either one from the list or multiple items from the list. Unfortunately, these drop down menus are more complicated than previous elements. We first have to create the selection box using the <SELECT> tag. Within that tag, we must at minimum specify a name. For example, <SELECT name="menuchoice">.

Next we specify any number of choices using separate OPTION tags. These option tags must occur within a <SELECT> <SELECT> pair, so as to be associated with that menu's name. The simplest for of the option tag is to surround some text with opening and closing tags. For instance,
<OPTION>Austin</OPTION>
<OPTION>Dallas</OPTION>
<OPTION>Houston</OPTION>

Finally, we close the select tag, </SELECT> and all of that yields:



If we change the attributes of the opening select tag, we can change the behavior of the menu. For instance, if we add the attribute size,which specifies the number of options to display in the menu, we get a selection box instead of a drop down menu. So,

<SELECT name="menuchoice2" size="2">
<OPTION>Austin</OPTION>
<OPTION>Dallas</OPTION>
<OPTION>Houston</OPTION>
</SELECT>

Yields



Finally, we can change the box so it allows multiple selections by adding a multiple attribute. So changing the select tag to:

<SELECT name="menuchoice3" size="2" multiple>

Gives us:


(The only difference is that we can now select multiple items



The Text Area

One last useful form element is the text area. Like the text box above, it allows the user to enter in text. The difference is that it can give the user a much larger space to write in. To create a text area, you use opening and closing <TEXTAREA> tags. The opening tag must contain a name attribute at minimum. If you wish your text area to have some default value, just stick that between the tags. To define the size of your area, you use the cols and rows attributes. So to create a good sized text area with text already inside it, we can use the following HTML.

<TEXTAREA name="memo" cols="60" rows="10">My default text</TEXTAREA>

which is rendered as:




Other Form Information

HTML 3.2 (Currently the most common HTML standard) implements several form elements not mentioned above, including images and files. In addition, the introduction above is not comprehensive in its coverage of all attributes of form element tags. For all there is to know about form fields, see the HTML 3.2 Reference Specifications for Form Fields

HTML 4.0 apparently adds further functionality inside forms. To learn about those, see the HTML 4.0 Recommended Specifications Form Section
Last modified: Thu Jun 4 13:42:27 CDT 1998