DOM Form Collection

DOM Basic Collections - Part 2

Forward: In this part of the series, we look at the DOM Form Collection.

By: Chrysanthus Date Published: 30 Jul 2012

Introduction

This is part 2 of my series, DOM Basic Collections. In this part of the series, we look at the DOM Form Collection. A collection is an ECMAScript array of the same type of elements in an html document. I assume, you have read the previous part of the series before reaching here; this is a continuation.

Note: If you cannot see the code or if you think anything is missing (broken link, image absent, etc.), just contact me at forchatrans@yahoo.com. That is, contact me for the slightest problem you have about what you are reading.

More than One Form in a Document
It is possible to have more than one form in an html document. You might have come across pages with Input Text controls and/or Input Search controls in different positions on the page. That is an indication of different html forms in different parts of the page. That is, the different controls in different parts of the page can be in different forms. An author may place more than one form in a page, so that the user can access any of the form, where he finds it convenient as he is reading through the web page. Such forms are usually small.

Syntax
To obtain a collection of all the forms in an html document, you would type:

document.forms

You begin with the reserved word, document, followed by a dot and then followed by the reserved word, forms, in plural.

Coding the Forms Collection
The forms collection (array) and its expressions are coded in the same way that the images collection and its expressions are coded. All collections have the length property to determine the number of references in the collection.

Using the Forms Collection
One good use of the forms collection is to change the styles of all the forms in the form at run time. Read and try the following code, which changes the background color of all the forms at run time:

<!DOCTYPE HTML>
<html>
<head>
    <title>Illustration</title>
</head>
<body>

    <form method="post" action="url" id="F1">
        <input type="text" id="T1" name="name1">
    </form>
    <form method="post" action="url" id="F2">
        <input type="text" id="T1" name="name1">
    </form>
    <form method="post" action="url" id="F2">
        <input type="text" id="T1" name="name1">
    </form>

    <script type="text/ECMAScript">
        for (i=0; i<3; i++)
            {
                document.forms[i].style.backgroundColor = "Cornsilk";
            }
    </script>

</body>
</html>

Note that it is the background color of the forms that are changed and not the background color of the input text controls. An input text control and its background are in front (layer) of the form (as seen by the user).

Form Attributes
You can use the forms collection to change the values of form attributes of all the forms. So the attributes like the method, action, ID and innerHTML can be changed in one run, with some degree of programming. In practice you will hardly have the need to change these other attributes.

Possibility to change the Control Attributes through Forms Collection
It is possible to change the values of the control attributes through the forms Collection. However, the process is long and I will not go into that. There is the new HTMLFormControlsCollection collection that the World Wide Web Consortium is working on. This collection produces an array of all the controls in a particular form. However, browsers are still to implement that. The collection will be very easy to use to access all the controls of a form. Hopefully, by 2014, most browser will have implemented it.

That is it for this part of the series. We stop here and continue in the next part.

Chrys

Broad Network

Related Articles

DOM Form Collection

DOM Basic Collections - Part 2

Introduction

Related Links

Comments