The FORM Element

The <FORM> Element

The <FORM> element surrounds the kind of controls the user interacts with in a web pagebuttons, radio buttons , check boxes, and so on. Forms not only hold controls you can work with in JavaScript, but also can send the data in those controls back to the server using Common Gateway Interface (CGI) programming. On the server, you can use programs to decode that data and construct web pages to send back to the browser using various languages and platforms such as Perl or .NET, or even server-side JavaScript. We'll see more on this topic in Chapter 24, ".NET and Security," but we'll also take a look at a little server-side programming here.

You can see the properties, methods , and events of the <FORM> element in Table 12.1, its properties in depth in Table 12.2, its methods in depth in Table 12.3, and its events in depth in Table 12.4.

Tip

You don't actually need a <FORM> element in the Internet Explorer to work with controls unless you want to divide a web page into separate forms, however, you do need to enclose controls in a <FORM> element in the Netscape Navigator if you want those controls to work. It's a good idea to always enclose all HTML controls in a form.

Table 12.1. Overview of the Properties, Methods, and Events of the <FORM> Element (See Chapters 5 and 6 for the JavaScript core HTML properties, methods, and events that also apply to this element.)

Properties	Methods	Events
acceptCharset	handleEvent	onreset
action	reset	onsubmit
autocomplete	submit
elements
encoding
enctype
length
method
name
target

Table 12.2. The Properties of the <FORM> Element

Property	NS2	NS3	NS4	NS6	IE3a	IE3b	IE4	IE5	IE5.5	IE6
acceptCharset				x				x	x	x
	Read/write
	Holds the name of the character set, or a comma-separated set of character sets, that the server must accept to use this form. In the HTML 4.01 specification, the W3C says that you can get a list of the registered character sets at ftp://ftp.isi.edu/in-notes/iana/assignments/character-sets.
action	x	x	x	x	x	x	x	x	x	x
	Read/write
	Corresponds to the ACTION attribute of a form, and usually holds the URL of a server-side program to send the form's data to for CGI processing. You can change this property on-the-fly to specify which URL (and therefore CGI program) you want to send the form's data to. Set to a string. See "Submitting Forms" in this chapter for an example.
autocomplete								x	x	x
	Read/write
	Indicates whether the Internet Explorer's AutoComplete feature is turned on.This feature lets the browser prompt for suggested text in controls, such as text fields, based on what the user has entered in the past. Set to on or off.
elements	x	x	x	x	x	x	x	x	x	x
	Read-only
	Holds the elements in a form and gives you access to them. An individual element can be accessed as form . elements ( index [, subIndex ]). Here, index is an integer or string that indicates the element to get. If this parameter is an integer, this method returns the element at the given position. If this parameter is a string and there is more than one element with the name or id property equal to that string, this method returns all matching elements as an array. The subIndex parameter, not supported in the Netscape Navigator, is used when index is a string and more than one element has the same name or id property, and enables you to specify which element to retrieve. See "Using Radio Buttons" in this chapter for an example.
encoding	x	x	x	x	x	x	x	x	x	x
	Read/write
	Sets or retrieves the MIME encoding for the form's data when it's sent back to the server, corresponding to the ENCTYPE attribute of a form. Set to a string; the default value is "application/x-www-form-urlencoded" . See "Emailing Forms" in this chapter for a little more information.
enctype				x						x
	Read/write
	This is the W3C name for the encoding property, and is now supported in the Netscape Navigator 6 and Internet Explorer 6.
length	x	x	x	x	x	x	x	x	x	x
	Read-only
	Holds an integer giving the length of the form's elements array. In other words, this property tells you how many elements are in the form.
method	x	x	x	x	x	x	x	x	x	x
	Read/write
	This property holds the method the form uses to send its data back to the server, and corresponds to the form's METHOD attribute. Set this property to a stringeither "GET" or "POST" . This property determines how data is relayed back to the server; most CGI programming will require "POST" here. (There is no default value.)
name	x	x	x	x	x	x	x	x	x	x
	Read/write
	Holds the name of the form, which you can use to access the form's contents in JavaScript. Set to a name string.
target	x	x	x	x	x	x	x	x	x	x
	Read/write
	This property holds the name of a window or frame that the CGI program on the server should send its results back to if you want to target a specific window or frame. Set to a name string. For information on predefined window/frame names you can use here, such as "_top" , see "Opening and Closing New Windows" in Chapter 9, "Using the document and body Objects."

Table 12.3. The Methods of the <FORM> Element (See Chapters 5 and 6 for the JavaScript core HTML properties, methods, and events that also apply to this element.)

Method	NS2	NS3	NS4	NS6	IE3a	IE3b	IE4	IE5	IE5.5	IE6
handleEvent			x
	Returns: Nothing
	This Netscape Navigator 4.0 method handles events captured with setCapture .
	Syntax: handleEvent ( event ), where event is an event type such as Event . CLICK . See Chapter 15, "Working with the Mouse, Keyboard, and Images," for more details.
reset		x	x	x			x	x	x	x
	Returns: Nothing
	This method simulates clicking the reset button in a form, which resets the data in the form's controls back to their default values (which you can set with most controls' VALUE attribute). This method causes the onreset event to occur.
	Syntax: form . reset() .
submit	x	x	x	x	x	x	x	x	x	x
	Returns: Nothing
	This method simulates clicking the submit button in a form, which sends the form's data back to the server (depending on the action property) for processing. Being able to submit a form through programmatic control like this is greatinstead of displaying a submit button and letting the user click it, you can check the user's data before sending it back to the server and send it yourself, for example. This method does not cause the onsubmit event to occur. See "Submitting Forms" in this chapter for an example.
	Syntax: form . submit() .

Table 12.4. The Events of the <FORM> Element (See Chapters 5 and 6 for the JavaScript core HTML properties, methods, and events that also apply to this element.)

Event	NS2	NS3	NS4	NS6	IE3a	IE3b	IE4	IE5	IE5.5	IE6
onreset		x	x	x			x	x	x	x
	Occurs when the reset button (if there is one) in a form is clicked or the reset method is called and the data in the form's controls is set back to its default value(s).
onsubmit	x	x	x	x	x	x	x	x	x	x
	Occurs when the user clicks the submit button (if there is one) in a form and the data in the form is about to be sent back to the server. This is a good one to handle yourself if you want to check the user's data before sending it back to the serverreturning false from this event's handler cancels the submission back to the server, and returning true allows the submission to happen. See "Submitting Forms" in this chapter for an example.