Skip to main content Accessibility Feedback

Getting an element's form with vanilla JS

On Friday, we looked at how to get all of the elements in a form with vanilla JS. Today, we’re going to look at how to get the parent form for any form element.

Let’s dig in.

The form property

Every element in a form has a form property that returns the parent form for that element.

<form>
	<label for="username">Username</label>
	<input type="text" id="username">
</form>
var username = document.querySelector('#username');
var form = username.form;

You could also use the closest() method, but the form property is both easier and more performant.

Here’s a demo.

Browser compatibility

The form property works in all modern browsers, and back to at least IE9.