An introduction to DOM scripting forms

The HTML DOM has dedicated APIs for retrieving and manipulating form controls. The DOM0 Forms Collection API is perfect for this but unfortunately often forgotten. This article describes how to use this API.

Accessing a form

Accessing a form with a Name attribute value of login is as follows:

var loginForm = document.forms.login;

Accessing form controls

Accessing the controls within the form is as follows:

var loginControls = loginForm.elements;

Note: If the login form contained a username and password control then loginControls would be a collection of two controls.

Accessing a control by name

There are several types of control including input, select, textarea, etc. Having retrieved the controls earlier we can loop over each control or retrieve a particular control by index or name. Retrieving a control by name is as follows:

var usernameControl = loginControls.username;

Inspecting a control value

Once we have a control we can interrogate its value:

var usernameValue = usernameControl.value;

This is useful if you want to perform client side validation, for example.

Join my newsletter

If you want to read about designing inclusive, simple and human experiences on the web, you'll probably love my newsletter.