Each of form in a document develops a form object. As a document can have more than one form, Form objects are stored in an array called forms.
Forms Array
By using the forms[ ] array we access each of the Form object in turn and illustrates the value of its name property in message box. Let us have a look at an instance that uses the forms array. Here we have a page along three forms on it.
<HTML>
<HEAD>
<SCRIPT LANGUAGE=JavaScript>
function window_onload()
{
var numberForms = document.forms.length;
var formIndex;
for (formIndex = 0; formIndex < numberForms; formIndex++)
{
alert(document.forms[formIndex].name
}
}
</SCRIPT>
</HEAD>
<BODY LANGUAGE=JavaScript onLoad="window_onload()">
<FORM NAME="form1">
<P>This is inside form1</P>
</FORM>
<FORM NAME="form2">
<P>This is inside form2</P>
</FORM>
<FORM NAME="form3">
<P>This is inside form3</P>
</FORM>
</BODY>
</HTML>
In the body of the page we define three forms. Each of the form is provided name, and contains a paragraph of text. In the definition of the <BODY> tag, the
window_onload( ) function is connected to the window object's onLoad event handler.
<BODY LANGUAGE=JavaScript onLoad="return
window_onload( )">
This means that while the page is loaded, our window_onload() function shall be called. The window_onload( ) function is described in a script block in the HEAD of the page. In this function we loop through the forms[ ] array. Just like other JavaScript array, the forms[ ] array contain length property which we can employ to determine how several times we have to loop. In fact, as we know how many forms there are, we could just write the number in. Though, here we are also demonstrating length property, as then it is easier to add to the array without change the function. Generalizing your code such as is a good practice to follow.
.
The function begins through getting the number of Form objects in the forms array & stores it in the variable numberForms.
function window_onload( )
{
var numberForms = document.forms.length;
After that we define a variable, formIndex, to be utilized in our for loop. After this comes for loop itself.
for (formIndex = 0; formIndex < numberForms; formIndex++)
{
alert(document.forms[formIndex].name);
}
Keep in mind that as the indices for arrays begins at zero, our loop have to go from an index of 0 to index of number Forms - 1. We do this through initializing the formIndex variable to zero, & setting the condition of for loop to formIndex < numberForms.
In the for loop's code, we pass the index of the wished form (i.e., formIndex) to document.forms[ ], that gives us the Form object at that array index in the forms array. To access Form object's name property, we put a dot at the ending and the name of the property, name.