FORMS : 

The HTML/http tool to send data from users' browser to the web server

Click here to see a sample form in action and its HTML source.

Declaring a FORM

<FORM METHOD="{POST | GET}" ACTION="program">

<FORM> ... </FORM> declaration does three things:

  1. Tells the browser where a form starts and where it ends.
  2. Tells the browser how the form data is going to transferred to the server (METHOD).
  3. Tells the server which program must be started so that it can process FORM data.

Text type form elements

The Text Box

This is a simple long box that allows for one line of text. Can be used to prompt the user enter his/her  name or e-mail address.

Enter Your Name :

<INPUT TYPE="text" NAME="name" SIZE="30" VALUE="default value">

  • NAME is the "variable name" like name assigned to the box.
  • VALUE is the string which the box will initially appear on the user's screen

The Text Area Box

A multi-line text box. No limit in number of chars and lines.

<TEXTAREA NAME="cv" ROWS=6 COLS=40>
DEFAULT TEXT LINE 1
DEFAULT TEXT LINE 2
 . . .
</TEXTAREA>

Input Buttons

The Radio Button

A nice form element to force the user make selection.

Male
Female

<input type="radio" value="Male"   name="gender" checked>Male<br>
<input type="radio" value="Female" name="gender">Female

(Selection toggles among buttons in the same group)

The Checkbox

Same as  radio buttons except that the user can check as many options he/she wants (no toggles)

C
PASCAL
PERL
X86 Assembly

<input type="checkbox" value="C"      name="LANG" CHECKED>C<br>
<input type="checkbox" value="PASCAL" name="LANG">PASCAL<br>
<input type="checkbox" value="PERL"   name="LANG">PERL<br>
<input type="checkbox" value="ASSY"   name="LANG">X86 Assembly<br>

The Option Box (Menu Box)

More or less like Radio Buttons but saves screen space

Here are the commands that placed the Pop-Up box on the page:

<SELECT NAME="COLOR" SIZE="1" [MULTIPLE]>
  <OPTION>Blue
  <OPTION>Red
  <OPTION SELECTED>Yellow
  <OPTION>Green
  <OPTION>Black
  <OPTION>Orange
  <OPTION>Purple
</SELECT>

  • SIZE : Number of rows displayed.
  • OPTION SELECTED : Denotes the "selected by default" entry.
  • MULTIPLE : Allows multiple selection by pressing the SHIFT key

Send and Reset Buttons

  

<INPUT TYPE="submit" value=" Send ">
<INPUT TYPE="reset"  value=" Cancel ">

Image Buttons

  

<input type="text"  name="keyword" size="16">&nbsp;&nbsp;
<input type="image" src="images/search.gif" border="0">

 

 

DO NOT FORGET TO CLOSE YOUR FORMS WITH A

</FORM>

BACK TO CTP-208 Home