Introduction to Forms This is a summary of the tags used to create forms in HTML, including the most frequently used, with examples.

The Form tag

Marks the beginning and end of the form and indicates what CGI will process the form. See following example:

................

</FORM>

Input tag:

Accepts input from the users, making the form interactive. The general model is:

TYPES

text - free input in one line. You should keep size under 50 to fit in one screen. Example:
<INPUT TYPE="text" NAME="name" SIZE="45">
password - allows the checking for a password. Same as text but echoes the password as asterisks. Example
<INPUT TYPE="PASSWORD" NAME="insecure">
radio - a list of items, of which only one can be chosen. Example
<INPUT TYPE="radio" NAME="level" VALUE="grad">graduate
<INPUT TYPE="radio" NAME="level" VALUE="und">undergraduate
<INPUT TYPE="radio" NAME="level" VALUE="non">non-degree
graduate
undergraduate
non-degree
You can select a default radio button using the CHECKED attribute:
<INPUT TYPE="radio" NAME="level" VALUE="non" CHECKED> non-degree
non-degree
checkbox - to choose multiple items in a list. Example
<INPUT TYPE="checkbox" NAME="morning">morning
<INPUT TYPE="checkbox" NAME="afternoon">afternoon
<INPUT TYPE="checkbox" NAME="evening">evening
morning
afternoon
evening
You can also use the CHECKED attribute to indicate that a check box is checked by default.
hidden - Hidden fields do not appear on the actual form. They are invisible in the browser display but sent as part of the form code. Example
<INPUT TYPE=hidden NAME="subject" VALUE="a test of forms - discard">
<INPUT TYPE=hidden NAME="RCPT" VALUE="abento@ubalt.edu">
Enter your e-mail address here: <INPUT TYPE= "text" NAME="from" SIZE= 45>
Enter your e-mail address here:
reset - clear the values in the form. Example
<INPUT TYPE="reset" VALUE="Clear">
submit - submits the form, making that the ACTION takes place. Example
<INPUT TYPE="submit" VALUE="Submit">

Generally we use both reset and submit in the same line as shown below:

Other tags

TEXTAREA - allows many lines of text to be entered in a form. Not really a TYPE tag, for it replaces it and has a special syntax. Its general format is: <TEXTAREA NAME="name" ROWS="rows" COLS="cols">some text or blank</TEXTAREA>
Modern browsers support a WRAP sub-tag. The WRAP=SOFT creates an automatic wraping to the next line, but text is sent as a single and long string. WRAP=HARD also provides automatic wraping, but text is sent with new-line characters at each point where the text wrapped. Example
<TEXTAREA NAME="message" ROWS="4" COLS="50" WRAP=SOFT></TEXTAREA>
SELECTIONS - selection of one or more items from a scrolling list. Selections start with the <SELECT NAME=="an item name "> tag, followed by as many <OPTION> tags as are options to be selected and ends by a </SELECT>. Example:
<P>Select a page to go:
<SELECT NAME="page">
<OPTION>home
<OPTION>index
<OPTION>select
<OPTION>daily
<OPTION>software
</SELECT></P>

Select a page to go:

This page is maintained by Al Bento who can be reached at abento@ubalt.edu. This page was last updated on May 17, 2007. Although we will attempt to keep this information accurate, we can not guarantee the accuracy of the information provided.