Forms

The form element is a powerful part of HTML, allowing users to actively interact with your website. Here is a list of all the different ways HTML forms can be used, and how to create them yourself. 

You can use all sorts of neat things in a HTML form; checkboxes, radio boxes, text input windows, buttons etc. Unfortunately, a HTML form doesn't process the data. It sends it to a cgi program on the server to be processed. So if you want to use forms in your web site, you're going to need a CGI program to process the data. 

The form element takes three attributes: Action, Method and Enctype.

For example:
<form action="http://www.vive.com/some_directory/cgi-bin/cgi_program">
...... input items.....
Action specifies the URL where the form content is to be sent. Usually this is a cgi_program that process the data, although you can use a mailto URL. In this case, the Form content is mailed to the indicated address. Method gives the method for sending information to the URL. The default is Get.

Following the Form element are all the various input items. Each element will send to the CGI program two bits of data: a variable name Name and the actual data received from the user value. Name is specified in the HTML code. 

For example, Name could be "email address" and the corresponding value input by the user is "yoursks@comsats.net.pk". Here are the various type of input items:

Input Element:
The Input element allows the user to type in a variety of different inputs such as text, checkboxes, or buttons. The type of input element depends on the attribute Type. The default value of any field is determined by the attribute value. Here are the different types of input elements and examples of each

Text:
Displays a single line text field (for instance, an email address). The size of the field is specified by size. You can also specify a maxlength attribute which allows the user to input data longer than the size: the text will scroll if the user exceeds the field size. Size and maxlength can be used in password also:
<input type="text" name="sig" value="http://khurrams.itgo.com" size=60>

Checkbox:
Displays a box the user clicks on or off and returns a value of "on" or "off". The default value is specified by the attribute value, For example:
<input type="checkbox" name="button" value="on">

Submit:
Displays a send message button at the end of the form. Clicking this will send all the form data. Every form needs a submit if you want to get any data.
<input type="submit" Value="Send Message">

Hidden:
The input element is not displayed by the browser, but the contents of the hidden element are still sent to the server. This is useful for keeping track of what has happened previously as HTTP protocol doesn't keep any memory of past transactions. Usually the hidden value is placed in the form by a CGI program.

Image:
Places an active inline image whose URL is specified by the SRC command. Clicking the image submits the form including the coordinates of the mouse pointer.

Password:
Offers a single line of text types is obscured by asterisks. The size of the password is specified by the attribute.
<input type="password" name="password" value="Khurrams.." size=8>

Radio:
Radio buttons are linked together by assigning them the same Name. When you turn one radio button on, you turn all the other ones off. Each radio element must have a value attribute, specifying "on" or "off".

Reset:
Displays a reset button that resets all the field in the form to their default values.

Select Elements:
The Select element creates a pull-down menu featuring a list of options the user must choose. Size specifies the number of displayed text lines. The default is 1, for more than 1 the list is displayed as a scroll box. The option selected is the value sent when the form is submitted. Having the attribute multiple within the select element means more than one option can be selected.
Inside an option you can have the attribute Disabled which displays that field as faded and is unselectable. You can also use the attribute Value within the options so that if that option is selected, you value is sent rather than the content of the option element.
<select name="mailto_name" size=3 multiple>
<option selected> Option 1
<option> Option 2
....... and so on.........
<option> Last Option
</select>

Textarea Element:
The textarea element allows the user to enter a message. If you put a message within the element, it will be displayed as an initial value.
<textarea cols=60 rows=8 name="message_body">
</textarea>

Isindex Element:
Another type of form of a sort is the isindex element. It isn't used within the Form element. In fact, it's placed within the Head element of the HTML document in the form <isindex>. This prompts the display in the user's browsers. This is a searchable index. Enter search keywords: with a text field for the user to input one or more words. This then sends the data to the server by appending the input data to the URL of the HTML document.