When working with forms, there are cases when you need to get all of the form elements in a nice and structured way. JavaScript offers a native way to get all of the form’s elements.

Get all element

Consider the following HTML form:

<form class="newsletter-form">
  <fieldset>
    <label for="name">Name: </label>
    <input type="text" name="name" id="name" required>
  </fieldset>
  <fieldset>
    <label for="email">Email: </label>
    <input type="email" name="email" id="email" required>
  </fieldset>
  <fieldset>
    <label for="newsletter">I'd like to receive newsletter: </label>
    <input type="checkbox" name="newsletter" id="newsletter">
  </fieldset>
  <fieldset>
    <button type="submit" name="submit">Subscribe</button>
  </fieldset>
</form>

To get all form elements use the elements property on a form tag.

const form = document.querySelector('.newsletter-form')

form.elements // HTMLFormControlsCollection(8) [fieldset, input#name, fieldset, input#email, fieldset, input#newsletter, fieldset, button, name: input#name, email: input#email, newsletter: input#newsletter, submit: button]

In the console it will look as follows:

As you can see elements property will return an HTMLCollection.

To access items you can use it as an Array to access by index or as an Object to access via name property which corresponds to the HTML name attribute.

The elements that are returned via the elements property will contain the following elements:

• button
• fieldset
• input
• object
• output
• select
• textarea

To convert HTMLCollection to an Array you can use Array.from() method.

Now you can use forEach to iterate over this Array and find specific items.

Other benefit of having an Array instead of HTMLCollection is that you can use Array methods like .map(), .filter(), .sort(), etc.

const form = document.querySelector('.newsletter-form')

Array.from(form.elements) // (8) [fieldset, input#name, fieldset, input#email, fieldset, input#newsletter, fieldset, button]

Get only inputs

If you want to get only input elements then you can use the querySelectorAll() method.

const formElements = document.querySelectorAll('.newsletter-form input')

formElements // NodeList(3) [input#name, input#email, input#newsletter]

In this case, you’ll get a NodeList of input elements. Similar to HTMLCollection, it is not an Array, so you won’t be able to use Array methods until you convert it to an Array.

const formElements = document.querySelectorAll('.newsletter-form input')

Array.from(formElements) // (3) [input#name, input#email, input#newsletter]

Conclusion

Use elements property when you need to get each form element. The HTMLCollection offers a way to access items via their name. However, if you want to iterate over it, you’ll need to convert it to an Array.

On the other hand, you can always use the for loop to iterate over HTMLCollection, and then use the name property.

To get a set of specific form elements you can use the querySelectorAll() method and specify the elements you wish to get. This approach would make sense to get specific form elements, for example, certain inputs that are confined within a fieldset element.