[Chapter 17] 17.3 Form Elements

17.3 Form Elements

As noted above, every Form object has an elements[] property, which is an array of the JavaScript objects that represent the input elements contained in the form. There are quite a few possible HTML form elements and corresponding JavaScript objects. They are listed in Table 17.1 and pictured in Figure 17.1. The HTML (and JavaScript) code that generated that figure is listed in Example 17.1. For comparison, Figure 17.2 shows the same form elements, as they appear in a different operating system. You can find out more about these JavaScript objects in the reference section of this book, but you may want to refer to an HTML book for complete details on the HTML tags and attributes used to create these form elements.

Table 17.1: HTML Form Elements
Object	HTML Tag	type Property	Description and Events
Button	`<INPUT TYPE=button>`	"button"	A push-button; `onClick()`.
Checkbox	`<INPUT TYPE=checkbox>`	"checkbox"	A toggle-button without radio-button behavior; `onClick()`.
FileUpload	`<INPUT TYPE=file>`	"file"	An input field for entering the name of a file to upload to the web server; `onChange()`.
Hidden	`<INPUT TYPE=hidden>`	"hidden"	Data submitted with the form but not visible to the user; no event handlers.
Option	`<OPTION>`	none	A single item within a Select object; event handlers are on Select object, not individual Option objects.
Password	`<INPUT TYPE=password>`	"password"	An input field for password entry--typed characters are not visible; `onChange()`.
Radio	`<INPUT TYPE=radio>`	"radio"	A toggle-button with radio behavior--only one selected at a time; `onClick()`.
Reset	`<INPUT TYPE=reset>`	"reset"	A push-button that resets a form; `onClick()`.
Select	`<SELECT>`	"select-one"	A list or drop-down menu from which one item may be selected; `onChange()`. See also Option object.
Select	`<SELECT MULTIPLE>`	"select-multiple"	A list from which multiple items may be selected; `onChange()`. See also Option object.
Submit	`<INPUT TYPE=submit>`	"submit"	A push-button that submits a form; `onClick()`.
Text	`<INPUT TYPE=text>`	"text"	A single-line text entry field; `onChange()`.
Textarea	`<TEXTAREA>`	"textarea"	A multiline text entry field; `onChange()`.

Figure 17.1: All the form elements, Windows 95

[Graphic: Figure 17-1]

Figure 17.2: All the form elements, Unix (X/Motif)

[Graphic: Figure 17-2]

Example 17.1: An HTML Form Containing All Form Elements

<FORM NAME="everything">  <!-- A one-of-everything HTML form... -->
 <TABLE BORDER CELLPADDING=5>   <!-- ...in a big HTML table. -->
   <TR>
     <TD>Username:<BR>[1]<INPUT TYPE=text NAME="username" SIZE=15></TD>
     <TD>Password:<BR>[2]<INPUT TYPE=password NAME="password" SIZE=15></TD>
     <TD ROWSPAN=4>Input Events[3]<BR>
       <TEXTAREA NAME="textarea" ROWS=20 COLS=28></TEXTAREA></TD>
     <TD ROWSPAN=4 ALIGN=center VALIGN=center>
       [9]<INPUT TYPE=button VALUE="Clear" NAME="clearbutton"><BR>
       [10]<INPUT TYPE=submit NAME="submitbutton" VALUE="Submit"><BR>
       [11]<INPUT TYPE=reset NAME="resetbutton" VALUE="Reset"></TD></TR>
   <TR>
     <TD COLSPAN=2>Filename: [4]<INPUT TYPE=file NAME="file" SIZE=15></TD></TR>
   <TR>
     <TD>My Computer Peripherals:<BR>
       [5]<INPUT TYPE=checkbox NAME="peripherals" VALUE="modem">28.8K Modem<BR>
       [5]<INPUT TYPE=checkbox NAME="peripherals" VALUE="printer">Printer<BR>
       [5]<INPUT TYPE=checkbox NAME="peripherals" VALUE="tape">Tape Backup</TD>
     <TD>My Web Browser:<BR>
       [6]<INPUT TYPE=radio NAME="browser" VALUE="nn">Netscape Navigator<BR>
       [6]<INPUT TYPE=radio NAME="browser" VALUE="ie">Internet Explorer<BR>
       [6]<INPUT TYPE=radio NAME="browser" VALUE="other">Other</TD></TR>
   <TR>
     <TD>My Hobbies:[7]<BR>
       <SELECT multiple NAME="hobbies" SIZE=4>
         <OPTION VALUE="programming">Hacking JavaScript
         <OPTION VALUE="surfing">Surfing the Web
         <OPTION VALUE="caffeine">Drinking Coffee
         <OPTION VALUE="annoying">Annoying my Friends
       </SELECT></TD>
     <TD align=center valign=center>My Favorite Color:<BR>[8]
       <SELECT NAME="color">
         <OPTION VALUE="red">Red        <OPTION VALUE="green">Green
         <OPTION VALUE="blue">Blue      <OPTION VALUE="white">White
         <OPTION VALUE="violet">Violet  <OPTION VALUE="peach">Peach
       </SELECT></TD></TR>
 </TABLE>
</FORM>
<DIV ALIGN=center>        <!-- Another table--the key to the one above. -->
  <TABLE BORDER=4 BGCOLOR=pink CELLSPACING=1 CELLPADDING=4>
    <TR>
      <TD ALIGN=center><B>Form Elements</B></TD>
      <TD>[1] Text</TD>  <TD>[2] Password</TD>  <TD>[3] Textarea</TD>
      <TD>[4] FileUpload</TD> <TD>[5] Checkbox</TD></TR>
    <TR>
      <TD>[6] Radio</TD>  <TD>[7] Select (list)</TD>
      <TD>[8] Select (menu)</TD>  <TD>[9] Button</TD>
      <TD>[10] Submit</TD>  <TD>[11] Reset</TD></TR>
  </TABLE>
</DIV>
<SCRIPT LANGUAGE="JavaScript1.1">
// This generic function appends details of an event to the big Textarea
// element in the form above. It will be called from various event handlers.
function report(element, event) 
{
    var t = element.form.textarea;
    var name = element.name;
    if ((element.type == "select-one") || (element.type == "select-multiple")){
        value = " ";
        for(var i = 0; i < element.options.length; i++)
            if (element.options[i].selected) 
                value += element.options[i].value + " ";
    }
    else if (element.type == "textarea") value = "...";
    else value = element.value;
    var msg = event + ": " + name + ' (' + value + ')\n';
    t.value = t.value + msg;
}
// This function adds a bunch of event handlers to every element in a form.
// It doesn't bother checking to see if the element supports the event handler,
// it just adds them all. Note that the event handlers call report() above.
function addhandlers(f)
{
    for(var i = 0; i < f.elements.length; i++) {
        var e = f.elements[i];
        e.onclick = new Function("report(this, 'Click')");
        e.onchange = new Function("report(this, 'Change')");
        e.onfocus = new Function("report(this, 'Focus')");
        e.onblur = new Function("report(this, 'Blur')");
        e.onselect = new Function("report(this, 'Select')");
    }
    // Special case handlers for the buttons:
    f.clearbutton.onclick = 
        new Function("this.form.textarea.value=''; report(this, 'Click');");
    f.submitbutton.onclick = 
        new Function("report(this, 'Click'); return false");
    f.resetbutton.onclick = 
        new Function("this.form.reset(); report(this, 'Click'); return false");
}
// Activate our form by adding all possible event handlers!
addhandlers(document.everything);
</SCRIPT>

While specific details about the JavaScript form element objects can be found on their respective reference pages, there are some features that all form element objects share. One obvious similarity is that (almost) all form element objects define event handlers that are invoked when the user interacts with them. The important ones are usually called onClick() or onChange(), depending on the type of object. The event handlers supported by each form element are listed in the fourth column of Table 17.1.

In addition to the event handlers shown in the table, all form elements (except the Hidden element) in Navigator 3.0 also support the onBlur() and onFocus() event handlers, which are invoked when the elements lose or gain the keyboard input focus, respectively. Unfortunately, on Unix platforms, these event handlers only work correctly for those form elements that involve text entry: Text, Textarea, Password and FileUpload. In addition to the onBlur() and onFocus() event handlers, all form elements in Navigator 3.0 also have corresponding blur() and focus() methods that remove input focus from an element and restore it. Again, on UNIX platforms, these methods have no effect except on the text-input form elements.

Another similarity between form element objects is that, in Navigator 3.0, all of them have a type property that identifies what type of element they are. The third column of Table 17.1 specifies the value of this property for each object. Because the elements[] array of the Form object contains various types of form element objects, the type property allows you to loop through the elements[] array and operate on the form objects it contains in ways that depending on their type. We'll see this done in Example 17.2, later in the chapter. Note that Internet Explorer 3.0 does not support the type property.

All form element objects also have (in both Navigator 3.0 and Navigator 2.0) a form property. This is simply a reference to the Form object that contains the element. This property provides a useful way for form objects to refer to other form objects from their event handlers. Within a form element event handler, the this keyword refers to the element object itself. This means that this.form always refers to the containing form. And therefore, any event handler in a form can refer to sibling objects in the same form with expressions like this:

this.form.elements[4]