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".
Form elements, themselves
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.)
action, elements, encoding, length, method, name, target
text box A: document.forms.elements.property_or_method
selection list B: document.forms.elements.property_or_method
submit button C: document.forms.elements.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.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.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.method, document.forms.method, and document.forms.method will all return "post", whereas document.forms.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:
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
returns the number of forms in the document body. On the other hand, the expression
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.