• Friday July 3, 2009 - 3:38:34 pm BST
• registered : 1499982
• online : 58487
• questions/day : 4721
• Answer rate : 76.36%

Forms

Interactive forms let web page authors give their pages interactive elements, such as for receiving messages from their readers, much like the reply cards found in some magazines.

The reader enters information by filling in fields or clicking on buttons, then pressing a submit button to send it to a URL, normally one pointing to an e-mail address or to a dynamic web script like PHP, ASP, or a CGI script.

The FORM tag

Forms are delimited with the <FORM> ... </FORM> tag, which contains several form elements, such as buttons and text boxes, and which must possess the following attributes:

• METHOD indicates how replies will be sent
  "POST" is the value that sends the data to the processing agent by storing it in the body of the form, while "GET" sends the data by adding it to the URL, separating it from the address with an exclamation mark (to learn more about the POST and GET methords, consult the article on HTTP protocol)
• ACTION indicates the address that the information will be sent to (a CGI script or e-mail address (mailto:email.address@machine))

This is the syntax for the FORM tag:

<FORM METHOD="POST" or "GET" ACTION="url" ENCTYPE="x-www-form-urlencoded">
...
</FORM>

Here are a few examples of FORM tags:

<FORM METHOD=POST ACTION="mailto:webmaster@kioskea.net">

<FORM METHOD=GET ACTION="http://en.kioskea.net/cgi-bin/script.cgi">

Inside the FORM Tag

The FORM tag acts as a sort of container for storing elements which let the user select or enter data. All data will be sent to the URL indicated in the ACTION attribute of the FORM tag by the method indicated by the METHOD attribute.

Any basic HTML element may be inserted into a FORM tag (such as text, buttons, tables, and links), but the interactive elements are the most important. These interactive elements are:

• The INPUT tag: All buttons and text boxes
• The TEXTAREA tag: A text box
• The SELECT tag: A multiple-choice list

Sending Data

When a form is submitted (by clicking on the submit button), the data in the form is sent to a CGI script in the form of name/value pairs, which are sets of data represented as the name of the form element, an equal sign ("="), and then the associated value. These name/value pairs are set off from one another by ampersands ("&"). So the data sent to the script will look like this:

field1=value1&field2;=value2&field3;=value3

http://en.kioskea.net/cgi-bin/script.cgi?field1=value1&field2;=value2

The INPUT Tag

The INPUT tag is the essential form tag, since it is used to create many interactive "elements." This tag's syntax is as follows:

<INPUT type="Field Name" value="Default Value" name="Element Name">

• checkbox: Checkboxes can be in one of two states: checked or unchecked. When the box is checked, the name/value pair is sent to the CGI.
• hidden: This field, which the browser does not display, is for defining a fixed setting that will be sent to the CGI as a name/value pair.
• file: A field that lets the user specify a filepath leading to a file that will be sent along with the form. The file types that can be sent should be specified, by using the ACCEPT attribute of the FORM tag
• image: A customised submit button, which appears as whatever image is at the location defined by its SRC attribute
• password: A textbox, in which the characters that are entered show up as asterisks, in order to camouflage the input text.
• radio: A button allowing the user to choose from between several options. Each of these radio buttons must have the same name attribute. The name/value pair of the radio button selected will be sent to the CGI. Using the checked attribute for one of the buttons lets you define it as being selected by default.
• reset: A reset button for clearing all elements in the form by setting them back to their default values.
• submit: A submit button to send the form. The text on the button can be set using the value attribute.
• text: A textbox for entering a line of text. The size of the box may be defined using the size attribute and the maximum length of the text with the maxlength attribute.

The TEXTAREA tag

The TEXTAREA tag is for defining a textbox bigger than just the single line allowed by the INPUT tag. This tag has the following attributes:

• cols: represents the number of characters that a line may contain
• rows: represents the number of lines
• name: represents the name associated with the textbox, which allows it to be identified in the name/value pair.
• readonly: prevents the user from changing the default text in the field
• value: represents the default value that will be sent to the script if the user has not entered anything in the textbox

The SELECT tag

The SELECT tag is for creating a dropdown list of elements (specified by the OPTION tags within it). This tag's attributes are:

• name: represents the name associated with the textbox, which allows it to be identified in the name/value pair.
• disabled: creates a disabled list, shown as being grayed out
• size: represents the number of lines in the list (this value may be larger than the number of actual elements in the list)
• multiple: enables the user to select several fields in the list

Example Form

Forms can be placed in a page using tables (recommended for a professional-looking layout). Here is an example summing up the above points, showing you how to place a form in a web page using a table:

<FORM method=post action="cgi-bin/script.pl">
User Registration
<TABLE BORDER=0>
<TR>
	<TD>Last Name</TD>
	<TD>
	<INPUT type=text name="lastname">
	</TD>
</TR>

<TR>
	<TD>First Name</TD>
	<TD>
	<INPUT type=text name="firstname">
	</TD>
</TR>

<TR>
	<TD>Gender</TD>
	<TD>
	Man: <INPUT type=radio name="gender" value="M">
	<br>Woman: <INPUT type=radio name="gender" value="F">
	</TD>
</TR>

<TR>
	<TD>Occupation</TD>
	<TD>
	<SELECT name="occupation">
		<OPTION VALUE="teacher">Teacher</OPTION>
		<OPTION VALUE="student">Student</OPTION>
		<OPTION VALUE="engineer">Engineer</OPTION>
		<OPTION VALUE="retired">Retired</OPTION>
		<OPTION VALUE="other">Other</OPTION>
	</SELECT>
	</TD>
</TR>
<TR>
	<TD>Comments</TD>
	<TD>
	<TEXTAREA rows="3" name="comments">
	Type your comments here</TEXTAREA>
	</TD>
</TR>

<TR>
	<TD COLSPAN=2>
	<INPUT type="submit" value="Send">
	</TD>
</TR>
</TABLE>
</FORM>

Here's what shows up on screen:

FORM Tag Attributes and Types of Input