Forms tags


You can ask for information to your page's visitors by using the <FORM> tag. You have to define a FORM:

<FORM ACTION="something" METHOD="method"></FORM>

You need a program to handle these information. Usually web servers use a special directory called 'CGI-BIN', where these programs are located. If you can't acces to this directory, you have to talk with your server administrator. ACTION defines the URL where that program is located. Well, 'script' is a more correct word than 'program'. However you can also use an action to send mail, and you need no access to CGI-BIN to do that. Just put 'MAILTO:user@domain' into the ACTION field. For example: ACTION="MAILTO:mickey@mouse". METHOD may be: GET or POST

  1. GET: input data are appended to the specified URL
  2. POST: input data are sended separately

After defining the form, you have to define INPUT fields:

<INPUT TYPE="type" NAME="something" SIZE="number" VALUE="something">

Where:

  1. TYPE: may be TEXT, PASSWORD, HIDDEN, CHECKBOX, RADIO, IMAGE, SUBMIT, RESET
  2. NAME: any name you want to use
  3. SIZE: the field's size
  4. VALUE: any value you want to show
TEXT Defines a text field (default)
PASSWORD When the user type here, text isn't shown
HIDDEN This is an hidden field. It contains the value you specified inside the HTML page
CHECKBOX Defines a set of fields which users may check off
RADIO Defines a set of mutually exclusive fileds
IMAGE Defines a clickable image which submit the form
SUBMIT Defines a button to submit the input data
RESET Defines a button to reset the input data
  Align Checked Max length Name Size SRC Value
TEXT     O N O   O
PASSWORD     O N O   O
HIDDEN       N     O
CHECKBOX   O   N     N
RADIO   O   N     N
IMAGE O     N   N  
SUBMIT       O     O
RESET              
O=Optional N=Needed

Now let's see a few of samples...

Sample 1

Your name: Your address:

And this is the HTML page's source:

</HEAD>
<BODY>
<FORM METHOD="GET">
Your name: <INPUT NAME="something" SIZE="10" TYPE="TEXT">
Your address: <INPUT NAME="something2" SIZE="10" TYPE="TEXT">
</INPUT>
</FORM>
</BODY>
</HTML>

However this form won't do anything! In fact you haven't specified the ACTION parameter...For example:

<FORM ACTION="http://www.your_server/cgi-bin/your_program" METHOD="GET">

Sample 2

Type something here:

And this is the HTML page's source:

</HEAD>
<BODY>
<FORM METHOD="GET">
Type something here: <INPUT NAME="something" SIZE="10" TYPE="PASSWORD">
</FORM>
</BODY>
</HTML>

Sample 3

And this is the HTML page's source:

</HEAD>
<BODY>
<FORM METHOD="GET">
<INPUT NAME="f1" TYPE="CHECKBOX">
<INPUT NAME="f2" TYPE="CHECKBOX" CHECKED>
<INPUT NAME="f3" TYPE="CHECKBOX">
</FORM>
</BODY>
</HTML>

Look at the third checkbox: you can set the CHEKED value...

Sample 4

And this is the HTML page's source:

</HEAD>
<BODY>
<FORM METHOD="GET">
<INPUT NAME="f1" TYPE="RADIO">
<INPUT NAME="f1" TYPE="RADIO" CHECKED>
<INPUT NAME="f1" TYPE="RADIO">
</FORM>
</BODY>
</HTML>

Click on the radio fields above. Remember: the RADIO type means 'mutually exclusive', so if you click on one of fields, that will be checked but others will be unchecked...

Sample 5

This is a SUBMIT button. You can use the SUBMIT type in order to submit the form.

And this is the HTML page's source:

</HEAD>
<BODY>
<FORM METHOD="GET">
<INPUT NAME="f1" TYPE="SUBMIT" VALUE="Submit">
</FORM>
</BODY>
</HTML>

The RESET type is like the SUBMIT type...Well, now let's see the <TEXTAREA> tag:

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

By means of this tag, you can define multiple lines fields. ROWS and COLS define the field's dimension:

And this is the HTML page's source:

</HEAD>
<BODY>
<FORM METHOD="GET">
<TEXTAREA NAME="f1" ROWS="2" COLS="20">
</TEXTAREA>
</FORM>
</BODY>
</HTML>

Now let's see the <SELECT> tag. By means of this tag, you can define a numbered list of item. A pop-up menu for example:

<SELECT NAME="something" SIZE="number" MULTIPLE></SELECT>

And this is the HTML page's source:

</HEAD>
<BODY>
<FORM METHOD="GET">
<SELECT NAME="f1" SIZE="3">
 color="#00FF00"><OPTION>Item 1</OPTION>
<OPTION>Item 2</OPTION>
<OPTION>Item 3</OPTION>
<OPTION>Item 4</OPTION>
<OPTION>Item 5</OPTION>
<OPTION>Item 6</OPTION>
</SELECT>
</FORM>
</BODY>
</HTML>

As you can see, there is another tag: <OPTION></OPTION>. By means of this tag you can define items:

<OPTION CHECKED VALUE="something"></OPTION>

Now look at this sample:

And this is the HTML page's source:

</HEAD>
<BODY>
<FORM METHOD="GET">
<SELECT NAME="f1" SIZE="1">
<OPTION>Item 1</OPTION>
<OPTION>Item 2</OPTION>
<OPTION>Item 3</OPTION>
<OPTION>Item 4</OPTION>
<OPTION>Item 5</OPTION>
<OPTION>Item 6</OPTION>
</SELECT>
</FORM>
</BODY>
</HTML>

This is a classical pop-up menu. Just define SIZE="1". Finally, look at this sample:

Here MULTIPLE choices are allowed (by pressing the CTRL-click or SHIFT-click keys). To do that, you have tu use the MULTIPLE option.

And this is the HTML page's source:

</HEAD>
<BODY>
<FORM METHOD="GET">
<SELECT NAME="f1" SIZE="3" MULTIPLE>
<OPTION>Item 1</OPTION>
<OPTION>Item 2</OPTION>
<OPTION>Item 3</OPTION>
<OPTION>Item 4</OPTION>
<OPTION>Item 5</OPTION>
<OPTION>Item 6</OPTION>
</SELECT>
</FORM>
</BODY>
</HTML>

If you specify SELECTED, that item will start checked:

In this sample, in fact, the fourth item is checked.

And this is the HTML page's source:

</HEAD>
<BODY>
<FORM METHOD="GET">
<SELECT NAME="f1" SIZE="3" MULTIPLE>
<OPTION>Item 1</OPTION>
<OPTION>Item 2</OPTION>
<OPTION>Item 3</OPTION>
<OPTION SELECTED>Item 4</OPTION>
<OPTION>Item 5</OPTION>
<OPTION>Item 6</OPTION>
</SELECT>
</FORM>
</BODY>
</HTML>


Index           Home  Back  Forward      About  Contact us!

Copyright (c) 1998-2006 Wowarea