How to Create Fill-In Forms with HTML

FORM Tag

• Use any valid HML body tag inside <FORM>...</FORM>
• METHOD can be
  • GET: Form input is appended to URL after "?":

    http://ei.cs.vt.edu/cgi-bin/wwwbtb/SampleForm.pl?submit=Run+Command

    General form is

    http://server/cgi-bin/script?name1=value&name2=value

  • POST: Form input is sent from client by HTTP POST method, with data following HTTP header.

Details on Using FORM Tag

• value is encoded:
  • Spaces changed to plus signs (+)
  • Nonalphanumeric characters changed to percent sign (%) followed by two-digit hex ASCII code

INPUT Tag

Input tag generates either

1. one-line text entry field,
2. multi-line text entry field,
3. radio button,
4. check box,
5. submission button,
6. clickable image similar to image map

Each is illustrated below.

One-Line Text Entry Field

Here's a one-line field, where text you type scrolls horizontally:

Enter month:

This was created by

Enter month:
<INPUT NAME="month" TYPE=TEXT>

Some variations are possible. You can specify the text box size, the maximum number of characters a user can type and even giveit a default text value:

Enter month:

This was created by:

Enter month:
<INPUT NAME="month" TYPE=TEXT SIZE=4 VALUE="OCT">

One other variation is possible for password entry, where some character replaces the actual characters a user types:

Enter password:

This was created by:

Enter password:
<INPUT NAME="passwd" TYPE=PASSWORD SIZE=8>

Multi-Line Text Entry Field

Here's a multi-line field, where text scrolls both horizontally and vertically:

Enter things to do:

This was created by

Enter things to do:
<TEXTAREA NAME="todo"></TEXTAREA>

Some variations are possible. You can specify the text area size and even give it a default text value:

Enter things to do: 1. Do CS6204 homework. 2. Play racketball.

This was created by

Enter things to do:
<TEXTAREA NAME="todo" ROWS=4 COLS=20>
1. Do CS6204 homework.
2. Play racketball.
</TEXTAREA>

Note that the TEXTAREA tag is not an INPUT tag, but a tag of its own!

Radio Button

A radio button is used when the user must select exactly one choice:

Choose a day: Saturday Sunday

This was created by

Choose a day:
Saturday <INPUT NAME="day" TYPE=RADIO VALUE="Saturday">
Sunday <INPUT NAME="day" TYPE=RADIO VALUE="Sunday">

The Web browser will make all INPUT tags with type RADIO and matching NAME field (e.g., "day") into one set of radio buttons.

Check Box

In contrast to radio buttons - where exactly one choice must be made - check boxes allow any number of options to be turned on or off:

Send e-mail reminder

This was created by

<INPUT NAME="email" TYPE=CHECKBOX VALUE="sendit"> Send e-mail reminder

Adding "CHECKED" to the above INPUT tag places a check in the checkbox by default:

Send e-mail reminder

Submission Button

Buttons have either TYPE=SUBMIT or TYPE=RESET.

• SUBMIT sends a GET or POST (recall - which depends on the FORM tag's METHOD attribute) containing the form data.
• RESET clears the form contents.

The simplest button is <INPUT TYPE=RESET>, which generates

You can display text different from "RESET" on the button by using the VALUE attribute:

This is generated by

<INPUT TYPE=RESET VALUE="Clear the form">

Forms that contain multiple submit buttons use the NAME attribute to distinguish which was clicked:

This is created by

<INPUT TYPE=SUBMIT NAME="submit" VALUE="Initate Local Search">
<INPUT TYPE=SUBMIT Name="submit" VALUE="Initate World-wide Search">

The first case generates in the GET or POST send to the Web server

submit=Initiate+Local+Search

Clickable Image

An image can be used as an input field using

<INPUT TYPE=IMAGE NAME="what_was_pressed" SRC="MapOfVirginia.gif">

A GET or POST will contain the x,y coordinates of where the user clicked on the image.

SELECT Tag

Besides INPUT tags, SELECT tag creates

• pull down lists
• scrollable lists with single or multiple seledtion

Pull Down List

Saturday Sunday

is produced by

<SELECT NAME="Day">
<OPTION>Saturday
<OPTION>Sunday
</SELECT>

Scrollable Lists

Just add "SIZE=2" attribute to the last SELECT tag to create a scrollable list two items high. Add the MULTIPLE attribute to allow multiple selection.

Thursday Friday Saturday Sunday

This is produced by

<SELECT SIZE=2 MULTIPLE NAME="Day">
<OPTION>Thursday
<OPTION>Friday
<OPTION>Saturday
<OPTION>Sunday
</SELECT>

Return to CS6204 home page.

Last modified on 22 October 1996.

Send comments to abrams@vt.edu.
[This is http://ei.cs.vt.edu/~wwwbtb/fall.96/ClassNotes/FormsScripts/forms.html.]