HTMLFormElement

Form Element

Represents a <form> tag. Groups inputs together and handles submission. You usually intercept the submit event to process data with JS instead of letting the browser navigate.

<form action="/submit" method="post" ></form>
Key Properties
PropertyTypeDescription
elementsHTMLFormControlsCollection All input/select/textarea elements inside the form. ▾

You can access them by index or by their name attribute.

JS
const form = document.querySelector('form');
console.log(form.elements.length);
const nameInput = form.elements['username']; // by name attribute
console.log(nameInput.value);
actionstring URL where the form data is sent on submit. ▾
JS
form.action = '/api/login';
console.log(form.action); // full URL
methodstring "get" or "post". Controls how data is sent. ▾
JS
form.method = 'post';
Common Methods
MethodReturnsDescription
submit()void Submits the form programmatically (bypasses the submit event). ▾

Note: calling form.submit() does NOT fire the submit event. Usually you want to listen for the event instead.

JS
form.submit(); // bypasses event listeners
reset()void Clears all fields back to their default values. ▾
JS
form.reset(); // clears all inputs
Quick Examples
JS
const form = document.querySelector('form');

// The most common pattern: intercept submit, handle with JS
form.addEventListener('submit', (e) => {
  e.preventDefault(); // stop the browser from navigating

  const data = new FormData(form);
  const username = data.get('username');
  const password = data.get('password');

  fetch('/api/login', {
    method: 'POST',
    body: JSON.stringify({ username, password }),
    headers: { 'Content-Type': 'application/json' }
  })
  .then(res => res.json())
  .then(result => {
    if (result.ok) {
      window.location.href = '/dashboard';
    } else {
      alert('Login failed');
      form.reset();
    }
  });
});
Related Elements
<input> <table>
Related Properties
value checked
Related Methods
addEventListener()