An Introduction to Form

HTML Forms
K. Yue @copyright 1997-2001, revised August 21, 2001

I. The ISINDEX element (Deprecated)

The ISINDEX element is deprecated and you may want to skip this section.
Simple searchable documents can be created using the ISINDEX element, which indicates the HTML file is a searchable document.
The ISINDEX element has the following properties.
It is inside the HEAD element.
It is rendered by the browser likes:

This is a searchable index. Enter search keyword: _____________

The user input will be included in the query string.
The PROMPT attribute can be used to indicate a more meaning prompt.
The BASE element may be used to indicate the URL the query string should be appended to. If not used, then the query string will be appended to the URL of the source document.

Example:

<HTML>
<HEAD>
<TITLE> Dr. Yue's Simple Searchable Database</TITLE>
<ISINDEX PROMPT="Keyword to search the course database:">
<BASE HREF="http://dcm.uhcl.edu/yue/dbsearch.cgi">
</HEAD>

II. The FORM element

Forms are much more flexible than isindex. It allows the display of input forms to solicit input from the users.
The form element has many attributes. The two most important ones are probably ACTION and METHOD.
The ACTION attribute specifies the URL of the (common gateway interface) cgi or other server-side programs that handles the form.
The METHOD attribute specifies the method by which data are sent to the server. It can either be:
- GET: usually for smaller forms, and
- POST: usually for larger forms.

III. The Input Element

The INPUT element defines one of several form elements for obtaining input.
The attribute TYPE is required for all INPUT elements. The attribute NAME is also required for all INPUT tags, except when the TYPE is "submit".
One line text field:
- TYPE="text".

Important attributes are NAME, VALUE (initial value), SIZE (width of text box) and MAXLENGTH (max length of characters to be accepted).

Example:

Masked text field (typed input not display on screen):
- TYPE = "password"
- Same attributes as one line text field.
- Input is not encrypted for transmission as a result.
File selection field (sending a chosen local file to the server):
- TYPE = "file"
- Important attributes are NAME, SIZE and MAXLENGTH (no VALUE).
- User may either type in a filename or use the Browse button to select the file.
- To use file selection, it is necessary:
  - to set the ENCTYPE of the form to multipart/form-data.
  - use the method POST.

Example:

<FORM ENCTYPE="multi-part/form-data"
METHOD="POST" ACTION="cgi-bin/process_hw.cgi">
Your name: <INPUT TYPE=text NAME="Name" SIZE=40>
<P>
Your Homework File Names: <INPUT TYPE="file" NAME="hw">
<P>
Submit <INPUT TYPE="SUBMIT">
</FORM>

Checkboxes (select or deselect items):
- TYPE="checkbox".
- Important attributes are NAME, VALUE and CHECKED (initially checked).
- Multiple items for the same name may be selected.

Example:

<FORM ACTION="fruit.cgi" METHOD="get">
What are your favorite fruits?
<P>
<INPUT TYPE="checkbox" NAME="food" VALUE="mango"> Mango
<BR>
<INPUT TYPE="checkbox" NAME="food" VALUE="orange"> Orange
<BR>
<INPUT TYPE="checkbox" NAME="food"
CHECKED VALUE="apple"> Apple
<BR>
<INPUT TYPE="checkbox" NAME="food" VALUE="banana"> Banana
<BR>
<INPUT TYPE="submit">
</FORM>

If Orange and Apple are selected, then the query string will be food=orange,apple.

Radio buttons (like checkboxes, but only one can be selected).
- TYPE="radio"
- Similar attributes as checkboxes, but only one button can be initially checked.
Submit button (for the submission of the form).
- TYPE="submit"
- Important attributes are NAME and VALUE; useful for identifying which submit button pushed.
Reset button (reset all input elements to their initial values).
- TYPE="reset"
- May include the attribute VALUE, which the browser uses to label the reset button.
Clickable image button (submit the form and input the coordinate of the mouse click).
- TYPE="image"
- Important attributes are SRC (URL of the image), ALIGN (alignment) and NAME.
- When the image is clicked, the form is submitted. The name-value pair of the image will be sent with the value being the coordinates of the mouse click w.r.t the upper left corner).

Hidden field (hidden from the users; for server information, such as to record the state).
- TYPE="hidden"
- Nothing will be displayed.
- Important attributes are NAME and VALUE.
- The field is not displayed. The name-value pair will be sent when the form is submitted.

IV. The TEXTAREA and SELECT elements

The TEXTAREA creates a multi-line input text area for the users.
Important attributes are COLS (number of columns), ROWS (number of rows), NAME and WRAP.
WRAP is used to control the display and the query string when a line is longer than COLS. Its value is "off" (one line; no wrapping), "virtual" (wrapping in display but no CR/LF in the query string or "physical (wrapping in both display and query string).
In the query string, each line of text is separate by %0D%0A (carriage return/line feed).
Text placed inside the TEXTAREA tag is its initial value displayed in the text area initially.
The SELECT tag displays a pull-down menu of choices for the user to select.
Attributes are NAME, MULTIPLE (allowing more than one option to be selected) and SIZE (number of options).
Each option of a select tag is defined by using the OPTION tag.
The attributes of OPTION are VALUE, SELECTED (initially selected) and DISABLED (disabled and usually rendered as grayed or faded).

Exercise 1:

Create a good looking form that gathers the following information from the users:
last name, first name, SS# (which should not be displayed), sex, major (CS, CIS, CSDE, CENG, SWEN, MATH, STAT), proficient languages (C, C++, Ada, Perl, Lisp, Prolog, Fortran, Basic, Scheme, Pascal and Java).