Referencing Forms and Form Elements

This page demonstrates and describes various approaches to obtaining references to forms and form elements in JavaScript. Both traditional and modern methods are covered.

Forms and Elements Collections

All the forms in a document are contained in the document.forms array-like HTMLCollection.[1] All the elements of any given form are contained in an elements property of that form, which is also an HTMLCollection.

If you have a form with the ID or name attribute specified as myForm, you could obtain a reference to it through the document.forms collection as follows:

var formRef = document.forms.myForm;
// or
var formRef = document.forms['myForm'];

If you have a form element with a name or ID firstName in the form with name or ID myForm, you could obtain a reference to it through the elements collection as follows:

var fName = document.forms.myForm.elements.firstName;
// or
var fName = document.forms['myForm'].elements['firstName'];
// or, using formRef as obtained above:
var fName = formRef.elements.firstName;
// or
var fName = formRef.elements['firstName'];

It is not unusual for a group of form elements to share the same name. This is typical for radio buttons. Here is an example:

<input type="radio" name="gender" value="male" /> male 
<input type="radio" name="gender" value="female" /> female

You can obtain a reference to these radio buttons as follows:

// reference to radio buttons with name 'gender' in form with name 'demoForm'
var gender = document.forms['demoForm'].elements['gender'];
 
alert( gender[0].value ); // male
alert( gender.length ); // 2

The result is an HTMLCollection which has a length property and whose elements can be accessed via index. An example demonstrates using a for loop to find the selected radio button in a list obtained using this approach.

Numerical Indexes with Forms and Elements Collections

Members of HTMLCollections can be referenced using numerical indexes just as you can do with arrays. For example, the following can be used to reference the first element in the first form in the document:

var el = document.forms[0].elements[0];

This form of referencing is error prone and hard to maintain because changes in the forms and form elements in your document would necessitate changes in your JavaScript as well.

Names vs. IDs for Forms and Form Elements

IDs need to be unique in the document, while the same name may be applied to multiple form elements. This is typical with sets of radio inputs and often checkboxes as well. An ID can be useful for applying styles. An ID is needed for JavaScript access using getElementById.

If you are associating a label element with a form element using a for attribute, the form element needs an ID:

<label for="firstName">First Name: </label>
<input type="text" name="firstName" id="firstName" />

Name attributes on form elements are necessary for handling by server-side code. Forms and elements collections can use either name or ID for access.

Modern Referencing Methods

The document.getElementById method returns the single matching element with the specified ID. The getElementsByTagName method can be invoked on an element to get a list of matching elements it contains. For example:

// get reference to element with id 'toppings'
var el = document.getElementById('toppings');

// get reference to input elements in toppings container element
var tops = el.getElementsByTagName('input');

A checkbox example demonstrates using a for loop to assign onclick handlers to the list of elements returned by getElementsByTagName.

There are a number of other methods that could be used to obtain references to form elements, such as getElementsByClassName, querySelector, querySelectorAll, and getElementsByName. Search JavaScript | MDN for details.

Back to top


  1. Other methods for obtaining references such as getElementsByTagName, getElementsByClassName, and querySelectorAll also return HTMLCollections or nodeLists. These array-like structures can be used to access individual elements in loops or using numeric indexes. See examples with radio buttons and checkbox groups. ^