How to Get All Elements in a Form using JavaScript

When working with HTML forms, you often need to access all of the input controls within a form to read their values, check their validity, or perform other manipulations. JavaScript provides a convenient, built-in property on the <form> element for this exact purpose.

This guide will teach you how to use the form.elements property to get a collection of all form controls. You will also learn how to use querySelectorAll for more specific queries and the best ways to iterate over the results.

The Core Method: The form.elements Property

The HTMLFormElement interface has a special elements property that provides a live HTMLFormControlsCollection of all the form controls contained within it. This is the most direct and idiomatic way to access all inputs, textareas, selects, and buttons.

<form id="my-form">
  <input type="text" name="first_name" />
  <textarea name="message"></textarea>
  <button type="submit">Submit</button>
</form>

For example, we need to get a list of all the interactive elements inside our form.

Solution: the elements property gives you a collection that you can easily work with. For maximum flexibility, it's a good practice to convert this collection into a true Array using Array.from().

const form = document.getElementById('my-form');

// Get a collection of all form controls
const allElements = form.elements;
console.log(allElements);   // Output: HTMLFormControlsCollection(...)

// Convert the collection to an array to use array methods like forEach
const elementsArray = Array.from(form.elements);
console.log(elementsArray); // Output: [input, textarea, button]

An Alternative for Specific Queries: querySelectorAll

While form.elements is great for getting all controls, sometimes you only need a specific subset, like all the <input> elements or all elements with a certain class. For this, querySelectorAll is the more powerful and flexible tool.

For example, we need to get only the <input> elements from our form, excluding the <textarea> and <button>.

const form = document.getElementById('my-form');

Solution: by calling querySelectorAll on the form element itself, you scope the search to its descendants.

const form = document.getElementById('my-form');

// Select only the <input> elements within the form
const inputElements = form.querySelectorAll('input');

console.log(inputElements); // Output: NodeList[input]

// You can use any valid CSS selector for more complex queries
const textInputs = form.querySelectorAll('input[type="text"]');

note

This is the recommended method for targeted selections.

How to Iterate Over the Form Elements

Once you have a collection or NodeList of elements, you can easily loop through them to perform an action on each one.

Method 1 (Recommended): The for...of Loop

The for...of loop is the modern and most readable way to iterate over collections like those returned by form.elements or querySelectorAll.

const form = document.getElementById('my-form');

for (const element of form.elements) {
  // Log the name and value of each form control
  if (element.name) {
    console.log(`${element.name}: ${element.value}`);
  }
}

Method 2: Array.from() with forEach()

If you prefer a functional programming style, you can convert the collection to an array and then use forEach.

const form = document.getElementById('my-form');

Array.from(form.elements).forEach(element => {
  if (element.name) {
    console.log(`${element.tagName} - Name: ${element.name}`);
  }
});

Conclusion

Accessing the elements within a form is a fundamental part of client-side form handling.

• To get all form controls (inputs, textareas, selects, etc.), the most direct method is the form.elements property.
• To get a specific subset of elements (e.g., only text inputs or elements with a certain class), the more powerful and flexible tool is form.querySelectorAll('your-css-selector').
• The modern for...of loop is the recommended way to iterate over the resulting collection of elements.

By choosing the right tool for your specific need, you can write clean, efficient, and readable code for managing your forms.