How to Create Fill-In Forms with HTML

FORM Tag

Use any valid HTML 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

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 (+)
Non-alphanumeric characters changed to percent sign (%) followed by two-digit hex ASCII code

INPUT Tag

Input tag generates either

one-line text entry field,
multi-line text entry field,
radio button,
check box,
submission button,
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

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.

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 16 June 1997 by abrams@vt.edu.
[This is http://ei.cs.vt.edu/~wwwbtb/fall.96/ClassNotes/FormsScripts/forms.html.]