JavaScript Form Object

In this JavaScript Tutorial you will learn about JavaScript form object, properties of form object, action – elements[], encoding, length, method, name, target, button, checkbox, FileUpload, hidden, password, radio, reset, select, submit, text, textarea and methods of form object.

Form Object:

form object is a Browser object of JavaScript used to access an HTML form. If a user wants to access all forms within a document then he can use the forms array. The form object is actually a property of document object that is uniquely created by the browser for each form present in a document. The properties and methods associated with form object are used to access the form fields, attributes and controls associated with forms.

Properties of Form Object:

• action
• elements[]
• encoding
• length
• method
• name
• target
• button
• checkbox
• FileUpload
• hidden
• password
• radio
• reset
• select
• submit
• text
• textarea

action:

action property of form object is used to access the action attribute present in HTML associated with the <form> tag. This property is a read or write property and its value is a string.

elements[]:

elements property of form object is an array used to access any element of the form. It contains all fields and controls present in the form. The user can access any element associated with the form by using the looping concept on the elements array.

encoding:

The encoding property of a form object is used to access the enctype attribute present in HTML associated with the <form> tag. This property is a read or write property and its value is a string. This property helps determine the way of encoding the form data.

length:

length property of form object is used to specify the number of elements in the form. This denotes the length of the elements array associated with the form.

method:

method property of form object is used to access the method attribute present in HTML associated with the <form> tag. This property is a read or write property and its value is a string. This property helps determine the method by which the form is submitted.

name:

name property of form object denotes the form name.

target:

target property of form object is used to access the target attribute present in HTML associated with the <form> tag. This property denotes the name of the target window to which form it is to be submitted into.

button:

The button property of form object denotes the button GUI control placed in the form.

checkbox:

checkbox property of form object denotes the checkbox field placed in the form.

FileUpload:

FileUpload property of form object denotes the file upload field placed in the form..

hidden:

The hidden property of form object denotes the hidden field placed in the form.

password:

password property of form object denotes the object that is placed as a password field in the form.

radio:

radio property of form object denotes the radio button field placed in the form.

reset:

As the name implies, the reset property of form object denotes the object placed as reset button in the form.

select:

select property of form object denotes the selection list object placed in the form.

submit:

submit property of form object denotes the submit button field that is placed in the form.

text:

text property of form object denotes the text field placed in the form.

textarea:

textarea property of form object denotes the text area field placed in the form.

An example to understand the above explanations in detail:

Here the FORM NAME="exforsys" creates and denotes the name of the form. The user can refer to the form in his or her code of JavaScript by the name exforsys. The form name given must follow the naming conventions or rules of JavaScript’s variable or function naming rules. The next word, ACTION="" tells the way the user wants the browser to handle the form when it is submitted to a CGI program running on the server. It can also be left as not specified with any of the above properties. This means the URL for the CGI program is then omitted.

The METHOD="GET" defines that the method data is passed to the server when the form is submitted.

INPUT TYPE="text" defines the object used as a text box with the name of the text box as a test with no initial value specified. INPUT TYPE="button" defines the object used as a button with the name of the button object as an example. The value is specified as Click and when the button is clicked, the onClick event handler fires and the function associated with it (testfunc(this.form)) is called.

Methods of form object:

• reset()
• submit()
• handleEvent()

reset():

reset() method of form object is used to reset a form.

submit():

submit() method of form object is used to submit a form.

handleEvent():

handleEvent() method of form object is used to start or invoke a form’s event handler for a specified event.