A Simple HTML Form Example

It is not necessary to know much in order to do HTML form programming. Perhaps writing server processing side (covered in the following section) would require some effort. But writing HTML form documents is easy. In fact, there are only 2 HTML tags that you need to know about to do a proper start. They are the FORM and INPUT tags. FORM denotes a form, and INPUT defines a visual interface element such as edit box or radio button that may interact with a user.

Here is the syntax for FORM tag:

where ACTION specifies URL of HTTP server to process the form (if not specified, then the base URL of the document is used). METHOD determines the way of submitting and may be either POST or GET. If POST is specified, then the form is submitted to the server via an HTTP post transaction. In case of GET data from form controls is appended as arguments to the action URL. Then the browser opens it as an anchor. TARGET instructs to load the results into a specific window. For example:

Here is the syntax for INPUT:

Parameters are as follows:
ALIGN defines alignment of text, CHECKED selects a check box or a radio button, MAXLENGTH determines maximum number of characters that can be entered into a text box, NAME is a control name, SIZE is its size in characters, SRC specifies the address of image (used when TYPE=IMAGE), TYPE defines control type, and VALUE - its value.

The following list describes INPUT control types that can be used in HTML forms:

CHECKBOX - used for checkboxes.
HIDDEN - control is not displayed to the user but the data is still submitted with the form.
IMAGE - an image filed that you may click. Click submits the form. Coordinates of where the click occurred are also submitted.
PASSWORD - text box control displays text that a user enters as asterisks.
RADIO - used for radio buttons.
RESET - a button that resets the form.
SUBMIT - a button that submits the form.
TEXT - a single line text box.

There are two more controls in addition to this list. They are text areas and menus. They are defined not with INPUT tag, but directly. The syntax for text area is as follows:

<TEXTAREA NAME=name [ROWS=rows] [COLS=cols]>
Default_window_text
</TEXTAREA>

Menus are defined by OPTION tags embedded between <SELECT ...> and </SELECT>. For example:

<SELECT NAME=name [SIZE=size] [MULTIPLE]>
<OPTION [SELECTED]>Option 1</OPTION>
<OPTION [SELECTED]>Option 2</OPTION>
<OPTION [SELECTED]>Option 3</OPTION>
...
<OPTION [SELECTED]>Option n</OPTION>
</SELECT>

Take a look at the following simple example:

<FORM ACTION="http://mig/logon" METHOD=POST>
<P>Name<BR>
<INPUT TYPE=TEXT NAME=id VALUE="Your Name">
<P>Password<BR>
<INPUT TYPE=PASSWORD NAME=pw>
<P><INPUT TYPE=SUBMIT VALUE=OK><INPUT TYPE=RESET VALUE=Reset>
</FORM>

Copy and paste this into you sample HTML page and see how it looks! This next example below shows how you can use other controls, such as text areas and menus in your forms:

<FORM ACTION="http://mig/logon" METHOD=POST>
<P>Name<BR>
<INPUT TYPE=TEXT NAME=id VALUE="Your Name">
<P>Password<BR>
<INPUT TYPE=PASSWORD NAME=pw>

<P>Color<BR>
<INPUT TYPE=RADIO NAME=color VALUE=0 CHECKED>Red
<INPUT TYPE=RADIO NAME=color VALUE=1>Green
<INPUT TYPE=RADIO NAME=color VALUE=2>Blue

<P><INPUT TYPE=CHECKBOX NAME=receipt CHECKED>Send receipt

<P>Comments<BR>
<TEXTAREA NAME=comments ROWS=10 COLS=60>
Please write your comments here.
</TEXTAREA>

<P>Please choose city<BR>
<SELECT NAME=city SIZE=5>
<OPTION>Moscow</OPTION>
<OPTION>St. Petersburg</OPTION>
<OPTION SELECTED>Vladivostok</OPTION>
</SELECT>

[ Contents | Home ]