HTML Forms


HTML forms enable us to create a simple and flexiable user interface to CGI programs with text fields, checkbox, menu and other useful tools. Constructing a form is less intimidating than it may appear at first. It works the same way as the ordinary HTML tags. If you've ever worked on any other HTML tags, you may find it's similar to form tag.

Form Example

Enter your Name: 

Here's the HTML source code for the above form:

 <FORM METHOD=POST ACTION="hello.cgi">
 Enter your Name:   <INPUT NAME="name" TYPE="TEXT" SIZE="20" MAXLENGTH="30">
 <INPUT TYPE="SUBMIT" VALUE="Send">     <INPUT TYPE="RESET">
 </FORM>
Let's take a close look at each of the elements of the form.

The FORM Tag

Format:

<FORM ACTION="url" METHOD=[POST| GET][ENCTYPE="..."]> ... </FORM>

The FORM tag defines the beginning and the end of a form. Although you can have multiple forms on one page, you can not nest forms.The FORM tag can have any of three attributes :ACTION, METHOD, and ENCTYPE. The attributes are as follows:

Inside a FORM tag, INPUT, SELECT, and TEXTAREA tags are used to specify interface elements within the form. Here is the detail.

The INPUT Tag

Format:

<INPUT TYPE="..."[NAME="..."] [VALUE="..."] [SIZE="..."] [MAXLENGHT="..."] [SRC="..."] [CHECKED]>

The INPUT tag is used to specify a simple input element inside a FORM. It is a stand-alone tag; no </input> tag is required. It enables you to specify a number of different ways to input data. There are a number of different input types such as text, password, checkbox, radio, submit and reset. All input types except for submit and reset require a name as an identifier. Each of the types are described in detail below:


The SELECT Tag

Format:

<SELECT NAME="..." [SIZE="..."] [MULTIPLE]>
<OPTION [VALUE="..."] [SELECTED]>

The <select> tag enables you to create a menu of items. You can allow the user to select multiple items by using the attribute MULTIPLE. You can limit the displayed size of the list by using the SIZE tag; if the list is longer than the value of SIZE, the browser will usually include scroll bars. A select list of size 1 is generally displayed as a pull-down menu. If a SIZE isn't specified, a size of 1 is assumed.

The syntax of the <select> tag is similar to those of lists. Each list item is specified by the 

With lists of size 1 (pull-down menu), one item is always selected by default. If you don't designate an option as selected, the first option is selected by default. However, with lists of size greater than 1, it is possible to have a <select> list with no options selected.

Look at this list:

Here is the code:

 <select name="platform" size="1">
            <option selected value=""> Select your platform
            <option value="NT">Window NT
            <option value="95"> Window 95
            <option value="Ultrix">Ultrix
            <option value="AIX"> AIX
            <option value="MacOS">MacOS
 </select>

The TEXTAREA Tag

Format:

<TEXTAREA NAME = "..." ROWS = number COLS = number></TEXTAREA>

The TEXTAREA tag can be used to place a multiline text entry field with optional default contents in a fill-out form. The attributes to TEXTAREA are as follows:

TEXTAREA fields automatically have scrollbars; any amount of text can be entered in them.

The TEXTAREA element requires both an opening and a closing tag. Here we define a TEXTAREA with 4 rows and 40 cloumns:

Here is the code with no default contents:

 <TEXTAREA NAME="foo" ROWS=4 COLS=40></TEXTAREA>
If with default contents, the code should look like this:
 <TEXTAREA NAME="foo" ROWS=4 COLS=40>     Default contents go here. </TEXTAREA>

Previous PageTable of ContentNext Page