Get and Set the Value of a Form Element with JavaScript forms

In this article, you will learn how to get and set the value of a form element with the JavaScript forms property.

Document.forms

To get and set the value of a form element, you can use the JavaScript Document.forms property.

This property returns an HTMLCollection listing all the <form> elements contained in the document.

For example, suppose you have a HTML code that contains multiple <form> elements as shown below.

<form name="signinForm">
  <input name="email" type="email">
  <input name="psw" type="password">
  <button type="submit">Sign in</button>
</form>
<form name="signupForm">
...
</form>
<form name="contactForm">
...
</form>

You can get all three forms (signupForm,signinForm,contactForm) by executing the script below.

const selectForm = document.forms;
console.log(selectForm);
// HTMLCollection(3) [form, form, form, signinForm: form, signupForm: form, contactForm: form]

If you want to get only one of the three forms, you can specify it with index. In the following example, you can get signinForm.

const selectForm = document.forms[0];
console.log(selectForm);
/*
<form name="signinForm">
  <input name="email" type="email">
  <input name="psw" type="password">
  <button type="submit">Sign in</button>
</form>
*/

To access by name, specify name after forms.

const selectForm = document.forms.signinForm;
console.log(selectForm);
/*
<form name="signinForm">
  <input name="email" type="email">
  <input name="psw" type="password">
  <button type="submit">Sign in</button>
</form>
*/

Also use name or index as shown below to get the element in the form.

const selectForm = document.forms.signinForm;
console.log(selectForm.email);
// <input name="email" type="email">
console.log(selectForm.elements[1]);
// <input name="psw" type="password">

Get and Set the Value of a Form Element

As an example, use the form below.

<form name="signupForm">
  <input name="username" type="text" value="username">
  <input name="email" type="email">
  <input name="psw" type="password">
  <input type="radio" name="radio" value="radio1">
  <input type="radio" name="radio" value="radio2">
  <select name="select">
    <option value="select1">select1</option>
    <option value="select2">select2</option>
    <option value="select3">select3</option>
  </select>
  <input type="checkbox" name="checkbox" value="checkbox1">
  <button type="submit">Sign up</button>
</form>

Here’s how to get and set the values ​​of the elements in this form.

const selectForm = document.forms.signupForm;

/*
  text
*/
// Get
console.log(selectForm.username.value); // username

// Set
selectForm.username.value = 'test_username';
console.log(selectForm.username.value); // test_username

/*
  radio
*/
// Get
console.log(selectForm.radio[0].value); // radio1
console.log(selectForm.radio[1].value); // radio2

// Set
selectForm.radio[0].value = 'test_radio';
console.log(selectForm.radio[0].value); // test_radio

/*
  select
*/
// Get
console.log(selectForm.select[0].value); // select1
console.log(selectForm.select[1].value); // select2
console.log(selectForm.select[2].value); // select3

// Set
selectForm.select[0].value = 'test_select';
console.log(selectForm.select[0].value); // test_select