Search within TutorialsPark

Javascript Forms: Introduction

Learn to use form related properties and methods

Javascript Forms: Basic Forms

JavaScript is widely used for form validation and to alter the default behaviour of standard form controls.

HTML offers a wide variety of ways to get inputs using radio buttons, check boxes, popups, textboxes, hidden fields etc.

A filled form is usually send to the server for futher processing of information(i.e using a PHP ASP.NET or CGI etc application). We will confine ourself to the role of JavaScript in collection and filtering of this information only.

Javascript Forms: Elements and Attributes

Any form begins with the element <form>, and its attributes to assign features, followed by input field to recieve input from users. And finally ends with </form> tag.

Form Attribute : action

The form attribute action is used to specify the URL of the server program which is supposed to further process the form inputs.

When the user submits the form, the broswer goes to the location specified in the action attribute, its usually the URL of a server side application

It is not necessary that the form data gets sent to the server script, it can be used to transfer information to functions, cookies etc.

JavaScript can also be used on client side to validate and filter the data before sending it elsewhere

Form Attribute : method

The form attribute method is used to specify how form data will be sent to the server. It has two value GET and POST

GET : The default value , it sends data back to the server by appending the data to URL(i.e query string).The query string prepended with a question mark is URL encoded string consisting of name/value pairs.

POST : It encodes the URL data in the same way as GET , but instead of sending the data in URL, it sends the data to the server as a message body, like an email message.

Its a more secure way of data transfer but should be used for large sized data.

If you use back button while using a form with POST value, the browser sends a warning that you may lose previous transaction data.

The demo below shows a basic form built using form related elements and attributes.

Example: Basic HTML Form

Give it a TRY! » Note: All form values will be set to their initial state, when you reset the form.

Javascript forms : form Object.

The Utility of JavaScript in forms is to validate the data before it gets sent to server script for processing of data.

It is used to check for empty form fields, improperly filled forms, verify the correct format of email address, credit card no, zipcode, telephone number etc.

JavaScript can also be used to submit the the form on behalf of the user, using javascript method submit().

It enables users to handle multiple forms, call function to handle events, respond to various form related events etc.

Javascript forms : forms [ ] array.

Since form object is contained within the document object, every time a form is created the browser creates an unique form object and stores it an element of an array called forms[ ] array.

The order in which the forms are displayed within the document is based on the index value of the form array, beginning at 0 and extending till n-1

While accessing forms using Javascript, the first form in the document is accessed as document.forms[0] and next form as document.forms[1] so on.

Javascript forms : Properties and Methods

Webforms are represented in HTML with element <form>, and in Javascript by type HTMLFormElement

The HTMLFormElement has all the same default properties as other HTML element

The additional properties and methods of HTMLFormElement are explained in the table below:

Javascript Form Element Properties and Methods

Property/Method Description
acceptCharset The charcter set that the server can process.
action The URL to send the request to.
elements A HTMLCollection of all controls in the form.
enctype The encoding type of the request
length The number of controls in the form
method The type of HTTP request to send, typically "get" and "post".
name The name of form; similar to HTML attribute name
reset() To reset all form fields to their default value
submit() To submit the form
target The name of the window to be used for sending the request and getting a response; similar to HTML attribute target