The form object, properties and methods – Wingdings Translator Online

Know the form object, which contains an entire form with its elements. See the different ways to access the form object using Javascript. Study the properties and methods of form objects.

The first step of the manual will consist of knowing the form object, its elements and properties. Later we will see some of the different ways of processing data from forms using Javascript, as well as sending and receiving them, etc.

The object forms

Within the DOM () of Javascript we find different objects of the browser. Each of the elements that are part of a page have a representation in the DOM, among others the form object.

The form object directly depends on the document object and this in turn depends on the window object, which is the main DOM object.

Just as the AND tags are used to create an HTML page, the same thing happens with a form: the form must be contained between the

tags.

In order to distinguish the forms we have to identify them in some way. There are two basic alternatives to achieve this and depending on which one we use, we will have to access the form object in a different way. We will study each of these forms separately.

Access to the form from Javascript using its identifier

As a simpler alternative we can use an id attribute to assign an identifier to the form. This identifier has to be unique for every other element on the page. That is, there cannot be two labels with the same identifier, whether they are forms or any other label.

Access to the form by name

With this second possibility we get the same result as the previous one, accessing the form object. Only that we will do it through the name that we have indicated with the “name” attribute.

From the point of view of HTML there is a difference between putting the id and the name. While the id must be unique across all tags on the page, the name simply must be unique across all

tags.

In this way, the basic syntax to refer to a form would be:

let formObject = window.document.forms.form_name

In that statement, you can do without mentioning the window object. Since the entire DOM begins with the window object, Javascript exempts us from using it. This would look like this code:

let formObject = document.forms.form_name

We can also save the reference to forms, since the browser treats the form as an object itself.

let formObject = document.form_name

As if those were few possibilities, the name attribute offers us an additional way to access the forms, through the array of all the forms that are in the document object.

let formObject = document.forms

We already know that it is absolutely unnecessary that there are so many ways to do the same thing, but Javascript is like that. It may also be unnecessary for us to mention them all, but the truth is that it is good for you to know them because you will find different types of code on the Internet and in the documentation in general and we do not want you to get confused when you find one way or another… everything is essentially equivalent.

We will see the application of this type of syntax with the next examples and as we go along.

Main properties of the form object

Like any DOM object, the form object has a number of properties with which we can access various of its features. We find the following properties:

yam: is the unique name of the form.

action: is the place to which the form is sent to be processed. The action defines the URL to which the form is submitted.

method: method of sending the data inserted in a form. The method can be:

GET = sends the data in a “visible” string. Convenient to send little data.
POST = sends the data “invisibly”. Suitable for sending a large amount of data.

target: defines the window or frame (frame) in which the results of the form will be displayed or processed. The value is the same as the one used in HTML (blank, self, top, frame_name, etc..)

Let’s see an example of the basic syntax of an HTML form.

…….fields….

methods of the form object

Now we are going to see the methods of the form object, through which we can access various functionality on the forms, to control them through Javascript. The form object has two methods:

submit: Submit the form.

reset: resets the form to the default values.

These methods produce the same actions as those that would be obtained by pressing the typical form buttons to submit and to reset it.

Application example with forms and Javascript

With what we have learned so far, we are going to carry out a couple of examples below, where we will see the use of the method property and the submit and reset methods.

Method POST

The code….

If we wanted to access this form to submit it, without a person having to press the submit button, we could launch this Javascript statement:

document.data.submit();

This other statement would be equivalent:

document.forms.data.submit();

Method GET

The code….

If we wanted to access this form to reset it, without a person having to press the reset button, we could launch this Javascript statement:

document.data1.reset();

This other statement would be equivalent:

document.forms.reset();

Conclusion on accessing forms using Javascript

In this article we have seen various ways to access forms with Javascript and be able to perform simple operations on them such as sending forms and resetting them.

In the next article we’ll learn more about the , which contains a list of all the forms on the page.