HTML Tutorials

Forms Construction

Ready to create your first form? Here's how to do it.

Drop-down List Boxes

A drop-down list box lets visitors select a single response from a predetermined list.

Here's how to create a drop-down list box:

<SELECT NAME="source">

<OPTION>Was just wandering around

<OPTION>Prodigy's Search Personal Web Pages

<OPTION>Link from Another Web Page

<OPTION>Other

</SELECT>

The actual field in the finished form would look like this:

Multi-select List Boxes

A scrollable multi-select list box lets visitors select one or more responses from a predetermined list.

The SIZE= parameter determines the number of 'choices' that will be displayed at any one time. In this example, SIZE=3 will cause 3 out of the 5 available selections to be visible at one time. A scroll bar will allow visitors to see the rest of the choices on the list.

Here's how to create a scrollable multi-select list box:

<SELECT NAME="Preferences" MULTIPLE SIZE=3>

<OPTION>Information that I found

<OPTION>Graphics and images

<OPTION>My Page Design

<OPTION>My Links to Other Pages on the Web

<OPTION>None of the above

</SELECT>

The actual field in the finished form would appear as shown below:

Radio Buttons and Check Boxes

Radio Buttons and Check Boxes are very similar. Both enable visitors to mark a single choice or multiple choices from among those offered.

Here's one way to use Radio Buttons for selecting one choice from a group of several possibilities.

(You can "pre-mark" a default value by using the CHECKED designation as shown below.)

Yes<INPUT NAME="area" TYPE="RADIO" VALUE=1 CHECKED>

No<INPUT NAME="area" TYPE="RADIO" VALUE=2>

Not Sure<INPUT NAME="area" TYPE="RADIO" VALUE=3>

The actual field in the finished form would appear as shown below:

Will you visit my Web page again?

Yes No Not Sure

Here's one way to use Check Boxes in your form:

Prodigy<INPUT NAME="prodigy" TYPE="CHECKBOX">

Netscape<INPUT NAME="netscape" TYPE="CHECKBOX">

Internet Explorer<INPUT NAME="inetexplore" TYPE="CHECKBOX">

Mosaic<INPUT NAME="mosaic" TYPE="CHECKBOX">

Other<INPUT NAME="other" TYPE="CHECKBOX">

The actual field in the finished form would appear as shown below:

Which Web browsers are you currently using?

Prodigy Netscape Internet Explorer Mosaic Other

Text Boxes

How much input do you want? A multi-line text box in a form lets you receive 'free-form' text from vistors to your site, while a text box is useful when a single line of text is called for.

Multi-line Text Box

To build a multi-line text box, you need to specify the number of ROWS (lines) and COLUMNS (characters per line) that will appear on your form. You must also provide a name for the text area, which will appear in the form output.

Here's how to construct a multi-line text box:

<TEXTAREA NAME="Comments" ROWS=5 COLS=40>

</TEXTAREA>

The actual field would appear in your form as shown below:
Note the scroll bar; more lines of text can be entered if your visitor is feeling particularly verbose!

Text Box:

A text box is handy for capturing specific input that should fit on a single line, like a name, an Email address, or perhaps a URL for another site on the Internet. Your text box can be blank, or you can specify a default value that will appear in the text entry field for your visitor to add to or change.

Note that the SIZE= parameter determines how many columns (characters) wide the text entry field will be. If you want to limit input to a specific number of characters, use the MAXLENGTH= parameter.

Here's how to create a text box with a maximum length and a default value:

<INPUT NAME="URL" TYPE="TEXT" VALUE="http://" SIZE=75 MAXLENGTH=60>

The actual field on the form would appear as shown below:

What is the URL of your Personal Web Page?

And here's how to create a text box without a default value:

<INPUT NAME="NAME" TYPE="TEXT" SIZE=75 MAXLENGTH=75>

The actual field on the form would appear as shown below:

Please enter your full name here

Putting It All Together

Take a look at our demo page. There you'll find a complete sample form, a sample of its output as it would appear in your Prodigy mailbox, and the HTML syntax used to construct it.