IUPUI integrated images

Web by Design logo
Home Tutorials Resources Kudos CV



Creating Web Forms

Table of Contents

Companion Tutorial

Using Transform to Process Web Forms

Using Web Forms

Creating HTML forms for use on the web allows you to solicit information from your users. Many of the popular HTML editors allow you to create form fields—they just don't tell you that you need some sort of scripting or utility on your web server to make everything work. But making it work is the topic of another tutorial (see, Using Transform to Process Web Forms); this one will teach you about forms and creating various types of form fields.

So that you'll better understand what an HTML editor is doing on your behalf, this tutorial will guide you through creating an HTML form manually. It is assumed that you are already comfortable with basic HTML coding and web design.

Information you should type to create the sample web form appears in boxes.

Back to Top

Creating a Web Form

You may want to print and refer to the Sample HTML Form as you work through this tutorial.

There are five (5) basic form fields that you will most likely create in a web form:

A single line text box
A radio button
A checkbox
A drop-down list
A text area box

Method & Script Location

The first step when creating a web form is to identify the form method and the location of the script or utility that makes it work. Although books written on HTML design may include a form method of "GET" as well as "POST," we use the POST method.

To identify the form method and script location, type:


where URL is the absolute address of the script or form utility.

NOTE: This forms tutorial assumes you are using the Transform forms utility, and that your web page is on the IUPUI champion.iupui.edu server in your home directory [~networkid] . Line breaks in the examples below are the result of the monitor display—you don't need to type them. To set up your form, type:

<FORM METHOD="post" ACTION="http://www.iupui.edu/~networkid/transform.cgi">

NOTE: Keep in mind as you work through this tutorial that data included within the angle brackets (< & >) is what the server sees; additional text is what is actually printed for the reader to see—it may look as though information has been repeated if you don't keep this in mind.


Textboxes create a box where information is contained on a single line. You can specify the length of each textbox your form uses so that the size of the box gives your readers an idea of how much information to include. However, most forms (including this sample one) do not prevent the reader from including more information—it simply scrolls through the box.

To create a form field, you must identify the type of form field (text), the name you specify for this particular form field (each form field in your form must be named with a unique name), and the length, in pixels, of the box:

<INPUT TYPE="text" NAME="name" SIZE="size">

where name is the name you give to this specific form field, and size is the length of the box. For the sample form, type:

<P>Name: <INPUT TYPE="text" NAME="name" SIZE="20"></P>

<P>E-mail Address: <INPUT TYPE="text" NAME="email" SIZE="28"><BR> in form of <EM>jsmith@iupui.edu</EM></P>

<P>Work Phone Number: <INPUT TYPE="text" NAME="phone" SIZE="15"></P>

<P>Mailing Address: <INPUT TYPE="text" NAME="address" SIZE="10"></P>

Radio Buttons

Radio buttons permit your reader to select only one of the possible choices you provide. When creating radio button fields, you must identify the type of the form field (radio), the name you assign to the button field, and the value. Value specifies the text that is returned to you when the data is processed; it indicates the value that is assigned to the button name after the reader makes a selection. If you wish one of the radio buttons to be pre-selected, you may denote it as "checked." For example:

<INPUT TYPE="radio" NAME="name" VALUE="first value" CHECKED>
<INPUT TYPE="radio" NAME="name" VALUE="second value">

where name is the name you assign to this button field, first value is the value of the first button, second value is the value of the second button, etc. Whichever button you wish to be pre-selected, will have the word "checked" included in the line of code; you may have only a single checked button.

You will repeat the input line of code as many times as you have radio button values, with the value changing for each line. To create the radio button section of your form (with the text box for other information), type:

<P>What is your favorite ice cream flavor (choose only one)<BR>
<INPUT TYPE="radio" NAME="favorite" VALUE="vanilla" CHECKED>Vanilla<BR>
<INPUT TYPE="radio" NAME="favorite" VALUE="chocolate">Chocolate<BR>
<INPUT TYPE="radio" NAME="favorite" VALUE="strawberry">Strawberry<BR>
<INPUT TYPE="radio" NAME="favorite" VALUE="other">Other—Identify:<BR>
<INPUT TYPE="text" NAME="other" SIZE="20"></P>

Drop-down List Boxes

Drop-down list boxes allow you to provide a "pick list" from which your reader may choose. The benefit of a drop-down list, rather than radio buttons, is that it creates a more compact entry on your form. Either one, though, only allows a single selection.

The format for creating a drop-down list is a little different than other form fields. Rather than an input tag, a drop-down list box uses a select tag. Notice that, unlike an input statement, you must close the select tag:

<SELECT NAME="name">
<OPTION SELECTED >option one
<OPTION>option two

where name is the name you assign to the drop-down list form field and option is the text that appears in the drop-down list. You must include a single option line for each item in the drop-down list, but only the one you want to visibly appear in the box initially would be "selected." To create a drop-down list in your form, type:

<P>Do you have a<BR>
<SELECT NAME="entry">
<OPTION SELECTED >Question About Ice Cream
<OPTION>Suggestion for a New Ice Cream Flavor
<OPTION>Praise for a Particular Ice Cream Stand
<OPTION>Complaint About a Specific Ice Cream Brand


Checkboxes allow your reader to make multiple selections from the choices you have provided. When creating checkbox fields, you must identify the type of the form field (checkbox). In other types of form fields you assign a single name to the form field; however, because your reader may select multiple checkboxes, each box must be assigned its own unique name and value. Value specifies the text that is returned to you when the data is processed and identifies the checkboxes that were selected by the reader. To create a checkbox form field, type:

<INPUT TYPE="checkbox" NAME="field name one" VALUE="value one">
<INPUT TYPE="checkbox" NAME="field name two" VALUE="value two">

where field name is a unique name for each checkbox you use and value is the text that is returned to you when the form data is processed to identify which checkbox was selected. To create checkboxes, type:

<P>How did you discover your favorite place(s) to eat ice cream?<BR>
(check all that apply)</P>
<P><INPUT TYPE="checkbox" NAME="cindy" VALUE="Cindy"> Cindy</P>
<P><INPUT TYPE="checkbox" NAME="talk" VALUE="Word-of-Mouth"> Word-of-Mouth</P>
<P><INPUT TYPE="checkbox" NAME="man" VALUE="Ice Cream Man"> Ice Cream Man</P>
<P><INPUT TYPE="checkbox" NAME="droveby" VALUE="Drove By"> Drove By</P>
<P><INPUT TYPE="checkbox" NAME="kid" VALUE="Neighborhood Kid"> Neighborhood Kid—Please identify: <INPUT TYPE="text" NAME="whatkid" SIZE="35"></P>

Textarea Boxes

Textarea is the final type of form field that we'll cover. Textareas are generally used for comments. As with single line text boxes, the size of the box you create only serves as a guide to the reader as to the amount of information you are expecting. The actual information entered by the reader, however, will scroll both horizontally and vertically.

You must identify the type of form field (textarea), the name you are assigning to this specific form field, and the number of rows and columns that you want the visible box to contain. Notice that, unlike an input statement, you must close the textarea tag:

<TEXTAREA NAME="name" ROWS="number_of_rows" COLS="number_of_columns"></TEXTAREA>

where name is the name you have assigned to this form field, number_of_rows is the number of rows (height) you wish the textarea box to have, and number_of_columns is the number of columns (width) you wish the textarea box to have. The textarea box will automatically have scroll bars where they are needed based upon the values you specify for rows and columns. To create the textarea box, type:

<P>Please add any additional comments or explanation that you desire:<BR>
<TEXTAREA NAME="suggestion" ROWS="10" COLS="45"></TEXTAREA></P>

Submit / Reset Buttons

To finish the form, you need to include a submit and, if desired, a reset button. The value you assign to each of these buttons is what appears as text on the button itself. (The button will "grow" to accommodate the length of the text you specify.) While you are not required to include a reset button, doing so gives your reader the opportunity to clear the data they have included in the form and start over. To include a submit and reset button, type:

<INPUT TYPE="submit" VALUE="text_for_submit">
<INPUT TYPE="reset" VALUE="text_for_clear">

where text_for_submit is the text you want to appear on the Submit button and text_for_clear is the text you want to appear on the Reset button. To create submit/reset buttons and finish your form, type:

<P><INPUT TYPE="submit" VALUE="Send Form To Me">&nbsp;&nbsp;<INPUT TYPE="reset" VALUE="Clear Form"></P>



HomeReturn Home

alid HTML 4.01 Transitional Valid CSS