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

Contents
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