DEV Community

Cover image for HTML Forms: Back to Basics
Nick Taylor
Nick Taylor

Posted on • Originally published at on

HTML Forms: Back to Basics

Let's forget frameworks and libraries for a moment. Today we’re just going to talk about the <form /> element and some of the things you can do with it in the DOM.

For web devs who are getting a little long in the tooth, you’re probably familiar with most of this, but for newer devs, this might be news to you. Either way, buckle up because we’re about to go old school with forms.

Will Ferell in Old School in a grocery store saying "Awesome!"

With newer DOM APIs like querySelector and querySelectorAll, we can access forms via a selector, e.g. document.querySelector(‘form’);. Did you know that you can also access forms directly from the document? There is an HTMLCollections of forms available via document.forms. Go ahead, I’ll let you open the dev tools in your favourite editor. Pretty neat eh?

So let’s say we’re on

Image description

You have a form that looks like this:

<form class="nav-searchbar" name="site-search">
Enter fullscreen mode Exit fullscreen mode

OK, so you know there is a document.forms object. Let’s take a peek in the dev tools.

Chrome DevTools Console screenshot

document.forms[0] finds our form, and there is one other form on the page, but there’s also two more properties on document.forms. There’s site-search and ue_backdetect. If we look at the markup above for our form, we see it has a name attribute with the value ’site-search'. That’s one of the extra properties on document.forms. Sure enough, document.forms[‘site-search’] gives us a form. If we do document.forms[0] === document.forms[‘site-search’] in the console of our dev tools, we’ll see that it returns true.

Chrome DevTools Console screenshot

If you haven’t caught on yet, this means that you can access forms via an index, which represents the order they appear in the DOM, but you can also access it via a form’s name attribute.

Character in a movie saying "Yes!"

Alright, there’s more folks. Let’s get a reference to our form by running the following in the console, const siteSearchForm = document.forms['site-search'].

Now let’s see what properties are available on our form.

Chrome DevTools Console screenshot

OK, so we see some properties like action, for the URL to GET/POST to, but as we go down the list, there’s one called elements. Hmm, what could that be? 😉 If we access it in the dev tools console, we get the following:

Chrome DevTools Console screenshot

What? All the form inputs are in there! That’s right folks, you have access to all the <input />s, <textarea />s etc via this property. Pretty cool eh? Not only that, if the form inputs have a name attribute, we can do the same thing we did for document.forms. We can access the form inputs by index or their name, e.g. siteSearchForm.elements[‘field-keywords’].

So accessing forms and form inputs can be done right off the document via the document.forms property.

One last fun fact. Each form element has a form property which is a reference to the <form /> DOM node that the form element is contained within.

Console log of a form element

Hope you enjoyed this DOM Throwback Thursday.

Top comments (4)

samuraiseoul profile image
Sophie The Lionhart

Not necessarily relevant to forms per se, but also in talking about document.querySelectorAll in dev tools, they include the nice jQuery $ for selecting things so now you can(only in dev tools) do $('form') instead of document.querySelectorAll('form').

I think that's pretty neat because when I have to open up dev tools and query the dom, things have gone strange. Also in the element view of the dev tools, the find function allows css query selectors as well as xPaths.

gypsydave5 profile image
David Wickes

Good article! It's bits of knowledge like this that make front end development fun.

Is that Kid'n'Play?

nickytonline profile image
Nick Taylor

Yes that is Kid 'n' Play. 😎

gypsydave5 profile image
David Wickes

Feeling old now... 🧓