Chapter 22
Forms
What are HTML Forms?
HTML forms, consisting of buttons, menus, and text boxes, are the means by which the
client computer can gather information from the user. Forms are supported by almost all
browsers so Web page authors can take them for granted. Search engines, for example,
accept their input using simple HTML forms that submit the user’s entry to the server.
Form tags are part of the HTML 2.0 standard and are supported by all JavaScript-enabled
browsers. This is one of the reasons why forms are heavily supported by JavaScript. As
will be explained later, JavaScript provides a convenient means of form content
manipulation and validation through the use of a client-side application. You should be
aware that Microsoft Internet Explorer still lacks many of the form properties and methods
supported by Netscape Navigator, but is quickly catching up.
JavaScript Form Reference
JavaScript enables you to interact with the user via forms. You must know how forms are
referenced in order to implement them in scripts. A form in terms of JavaScript is a plain
object. It has properties, methods, and even event handlers. There are quite a few
possible references from which you may choose. In this section we shall outline all of
these possibilities so you will have the freedom to select the most convenient method.
forms Array
Suppose you have an HTML document which includes several forms, each defined by a
regular <FORM>…</FORM> tag pair. You can refer to each form by its
index in the forms array. The forms array is a property of the document
object so it is referred to as document.forms. The object representing the first
form in the page is document.forms[0]. The second form is document.forms[1],
the third one is document.forms[2], and so forth. The forms array
includes an entry for each of the document’s forms (<FORM> tag), in
source order. The general reference to a form is as follows:
document.forms[index]
As with all of JavaScript’s arrays, the forms one includes a length
property representing the number of forms on the page. The last form in the document,
therefore, is:
document.forms[document.forms.length – 1]
Elements in the forms array can be set only by the HTML document and, hence,
they are read-only for JavaScript. The following statement, for example, has no effect:
document.forms[0] = "work hard"
The string value of a form is <object nameAttribute>, where nameAttribute
is the NAME attribute of the form.
Form Name
You can refer to a form by its name, rather than by its index:
document.formName
In order to take advantage of this referencing method, you have to explicitly assign a
name to the form, via the NAME attribute.
Note: The term reference is used to describe an object’s
scripting protocol. A single object can be referenced via different but equivalent
protocols.
Form Object
HTML Syntax
All forms are plain HTML tags. The top-level tags are the <FORM>…</FORM>
tag pair. All form elements must be placed within these tags, or else they are not
interpreted correctly. The general syntax of the <FORM> tag is as follows:
<FORM
[NAME="formName"]
[TARGET="windowName"]
[ACTION="serverURL"]
[METHOD="get" | "post"]
[ENCTYPE="encodingType"]
[onSubmit="handlerText"]
[onReset="handlerText"]>
</FORM>
The attributes are:
- METHOD—specifies how to submit the form. It can be either GET or POST.
The latter is more popular because it enables the client to send a greater amount of data
to the processing script. Nonetheless, GET is much easier to use and is also
suitable for JavaScript scripts. If a form is returned with GET, the data is
placed in the QUERY_STRING environment variable. POST, on the other
hand, instructs the client to pass the data to the server via its operating system’s
standard input method.
- ACTION—specifies the URL of the server-side script that processes the data
submitted by the form. This attribute is necessary only when the processing script resides
on the server. In this case, the script will be written in either C or Perl and will
adhere to the CGI (Common Gateway Interface) protocol. The URL scheme must be HTTP.
- NAME—specifies the name of the form. This attribute is seldom used because it
does not have any effect when using a server-side script. When using client-side
JavaScript, though, it is recommended you name the form for much easier referencing. Since
a form’s name will be mostly used by JavaScript’s scripts, it is also preferred to use
the JavaScript’s identifier naming standards.
- ENCTYPE—specifies the MIME type of the submitted data such as “text/plain”
for plain text. The default MIME encoding of the data sent is “application/x-www-form-urlencoded.”
- TARGET—specifies the window to which form responses go to. This attribute
instructs the browser to display the server responses in the specified window rather than
in the default window where the form resides. The specified value cannot be a JavaScript
reference to a window—it must be a plain HTML frame or a window reference.
Although the <FORM>…</FORM> tag pair represents an HTML form,
you can still place any other valid HTML tags within it. Mixing tables with forms, for
example, is often used to enable simple layout. Although syntactically valid, nesting a
form inside another form does not make any sense and you should avoid doing it.
Note: Microsoft Internet Explorer allows you to place form elements
outside the <FORM>…</FORM> tag pair. You should avoid using such
elements because they are not accessible via a full object hierarchy. They are accessible,
though, via JavaScript’s this scheme (see explanation on this keyword later in
this chapter).
Event Handlers
onSubmit
A submit event occurs when a form is submitted, an event reflected by the onSubmit
event handler. This attribute is a must, or else there won’t be any response to the
form’s submission.
