Thursday, July 14, 2005
Properties V: Form Elements
Blog Entry #16
Up to this point, I've been a bit sloppy in my use of the phrase "form element", so let's tighten up the terminology here. With respect to an HTML form, form element really refers to the containing element that begins with <form> and ends with </form> - fair enough, eh? The elements that compose a form - text boxes, radio buttons, selection lists, submit buttons, etc. - are termed controls, and hereafter we will call them "form control elements".
Forms crop up regularly in the JavaScript material at HTML Goodies; however, at least for the short term, we won't be sending them from point A to point B across the Internet. Instead, as will become clear, forms will serve as an important part of our JavaScript toolbox of interactivity. Specifically, we will solicit input from the user via form control elements and then feed the results into JavaScript command statements in order to do cool things.
Form elements, themselves
In analogy to an <img> element, a <form> element can be referenced in JavaScript as either a member of the document forms[ ] collection or by its name, i.e.,
document.forms[index number or name string].property_or_method or document.form_name.property_or_method
in which form_name is the value of the name attribute held by the <form> tag. (DevGuru's document object page specifically lists a formName property for the document object.)
On their respective JavaScript Form object pages, DevGuru and JavaScript Kit list identical sets of seven form object properties:
action, elements, encoding, length, method, name, target
The most important of these properties for our purposes is the elements property, which represents a built-in array of the form control elements composing a form; in much the same way that forms[ ] is a document object collection, elements[ ] is a Form object collection. Like the document forms property, the Form elements property is not meant to be returned but is used to refer to the control elements of a form in JavaScript expressions. Let's suppose that you author a Web page containing a single form that comprises a text box A, followed by a selection list B, and finally a submit button C. We can reference these controls as follows:
text box A: document.forms[0].elements[0].property_or_method
selection list B: document.forms[0].elements[1].property_or_method
submit button C: document.forms[0].elements[2].property_or_method
The action, encoding, method, and target properties relate to the sending and processing of a form; they are all read/write. Very briefly:
• The action property specifies the URL to which the form will be sent for processing; for example, at the HTML Goodies home page, document.forms[0].action would currently read: http://search.internet.com/htmlgoodies.earthweb.com (the value of the action attribute for the first <form> on the page).
• When a form is sent via HTTP to its processing agent, its data is encoded according to a particular MIME type; it follows that the Form encoding property specifies a form's MIME type encoding, which in HTML can be preset via the enctype attribute of the <form> tag; at the HTML Goodies home page, document.forms[0].encoding would read: application/x-www-form-urlencoded (this is the default value of the (optional) enctype attribute, which, you'll note from the source code, is not used in any of the page's <form>s).
• The method property specifies whether the GET or POST HTTP request method is used to send the form to its processing agent; at the HTML Goodies home page, document.forms[0].method, document.forms[2].method, and document.forms[3].method will all return "post", whereas document.forms[1].method will return "get".
• Similar to the target property of the Link object, which we briefly discussed in Blog Entry #14, the Form target property specifies the window or frame to which the form's output, if any, is sent.
When this post was first written I presented a form target demo utilizing an EarthLink appendto CGI script that collects data from an HTML form, writes the data to a separate file, and then pops up a "thank you" page for the user. As I am no longer an EarthLink subscriber, a div-based facsimile of the original demo is given below:
Lunch Survey
The processing of HTML forms is an interesting, if somewhat involved, topic, and HTML Goodies discusses several approaches thereto, including the use of CGI/Perl, ASP (active server pages), and PHP (hypertext preprocessor). Annoyingly, EarthLink doesn't seem to support PHP - I tried to execute the test script here in files with .php, .php3, .php4, and .phtml extensions at my EarthLink Web server space, without success - nor does EarthLink allow its basic subscribers to put custom CGI scripts on its server machines; otherwise, I would be tempted to address form processing in more detail.
Getting back to Form object properties, the length property, which is read-only, can be used in a couple of different ways. Like the length property of the document links collection (discussed in Blog Entry #13), the expression
document.forms.length
returns the number of forms in the document body. On the other hand, the expression
document.forms[i].length
returns the number of control elements in the ith form on the page. At the bottom of the left side of the above demo is a small script that reads the Form length property in both of these ways. With respect to the document.forms['formdemo'].length return, the nine control elements, in order, are two hidden inputs, a text box, four radio buttons, a selection list, and a submit button. Note that each radio button is indexed as a separate control, and that the option elements of the selection list are not included in the element count.
Finally and anticlimactically, the Form name property specifies a form's name; it is read/write.
We'll address the properties of form control elements in the next entry.
reptile7
- posted by A. Peak @ 2:01 PM
Actually, reptile7's JavaScript blog is powered by Café La Llave. ;-)