17.5 Naming Forms and Form Elements

As we saw above, all form elements have a NAME attribute that must be set in their HTML tags, if the form is to be submitted to a CGI script. While form submission is not generally of interest to JavaScript programs, there is another useful reason to specify this NAME tag; we'll explain it below.

The <FORM> tag also has a NAME attribute that you can set. This attribute has nothing to do with form submission. It exists for the convenience of JavaScript programmers. If the NAME attribute is defined in a <FORM> tag, then when the Form object is created for that form, it will be stored as an element in the forms[] array of the Document object, as usual, but it will also be stored in its own personal property of the Document object. The name of this newly defined property is the value of the NAME attribute. Thus, if you define a form with HTML like this:

<FORM NAME="questionnaire">
   ...
</FORM>

document.questionnaire

document.forms[2]

Note that the <IMG>, <APPLET>, and <EMBED> tags all also have NAME attributes that work the same way as the NAME attribute of <FORM>. But with forms, this style of naming goes a step further, because all of the elements contained within a form have NAME attributes. When you give a form element a NAME attribute, you create a new property of the Form object that refers to that element. The name of this property is the value of the attribute, of course. Thus, you can refer to an element named "zipcode" in a form named "address" as:

document.address.zipcode

document.forms[1].elements[4]

In HTML forms that use Checkbox and Radio elements, it is common practice to give each of a set of related elements the same name. For example, if a form contains a number Radio buttons that allow the user to indicate their favorite web browser, then each of these buttons might be given the name "favorite". The VALUE property of one button might be "nn", and the value of another might be "ie". When the form is submitted, a string like "favorite=mosaic" will be sent to indicate the user's selection. Using the same name for multiple elements is not a problem in this case because only one of those elements can be selected at a time, so only one value can be submitted with that name.

When more than one element in a form has the same NAME attribute, JavaScript simply places those elements into an array using the specified name. So, if the Radio objects in the example above were part of our form named "questionnaire", then you could refer to them with expressions like these:

document.questionnaire.favorite[0]
document.questionnaire.favorite[1]