Accessing Forms

Each time you add a set of <form> and </form> tags to your HTML document, you create a form object. If you want to access a form object using JavaScript you can do so using one of the following three methods.

  • Use the forms array of the document object
  • Name the form and use the name to access the form
  • Give the form an id then use the document.getElementById() method

Using the forms Array

The forms array allows you to access a form using an index number in the array.
Each set of <form> and </form> tags on the page will create an additional element in the forms array.
You can refer to the first form in the document like this:

document.forms[0]

Since arrays begin counting at 0,the above code will refer to the first form. If you want to access the second form in the document then you have to replace 0 with 1.

If you want to use a form you have to use a property or a method of the form object. For example you can use the length property to find out how many elements there are in a form (input boxes, radio buttons etc).

<body>

<form>
Name: <input type="text" />
E-mail: <input type="text" />
<input type="submit" value="Submit" />
</form>

<script>
document.write("This form has " + document.forms[0].length + " elements");
</script>

</body>

If there is more than one form on the page and you want to display the number of elements of each form then you can use something like the following code.

<body>

<form>
Name: <input type="text" />
E-mail: <input type="text" /> <input type="submit" value="Submit" />
</form>

<form>
Education: <input type="text" />
Occupation: <input type="text" />
<input type="submit" value="Submit" />
</form>

<script>
document.write("There are " + document.forms.length + " forms on this page.<br>");
for (var count=0; count < document.forms.length; count++) {
var numOfForms = count +1;
document.write("Form " + numOfForms + " has " + document.forms[count].length + " elements.<br>");
}
</script>

</body>

Using Form Names

Using form names allows you to name each form on the page then access them later. For that you have to add a name="formname" HTML attribute to the opening form tag of the form you want to access.

<form name="Form1">
Name: <input type="text" />
E-mail: <input type="text" />
<input type="submit" value="Submit" />
</form>

Now the form becomes an instance of the form object that can be accessed through its name.

document.formname

For example if you want to find the number of elements in a form that has a name then you can use a code as shown below:

<form name="Form1">
Name: <input type="text" />
E-mail: <input type="text" />
<input type="submit" value="Submit" />
</form>

<script>
document.write("The form 'Form1' has " + document.Form1.length + " elements.");
</script>

Using an ID

Using the form’s id is the clearest way to access a form and this method works just as the previous method.
This time you use document.getElementById() to access the form element.

<form id="Form1">
Name: <input type="text" />
E-mail: <input type="text" />
<input type="submit" value="Submit" />
</form>

<script>
var formLength = document.getElementById("Form1").length;
document.write("The form 'Form1' has " + formLength + " elements.");
</script>

Leave a Reply