Author
In the HTML DOM (Document Object Model), forms are represented as objects that allow JavaScript to access, validate, and manipulate <form> elements and their inputs dynamically.
The DOM gives developers full control over form data — from reading and updating input values to handling submissions and validation in real time.
Form Element:
The <form> tag can be accessed using document.forms, document.getElementById(), or querySelector().
Form Inputs:
Inputs like <input>, <textarea>, and <select> are child elements of a form and can be accessed via the elements collection.
Form Events:
Common events include submit (on form submission), input (when the user types), and change (after input loses focus).
By ID:
The id attribute uniquely identifies an element on a page. Using JavaScript, you can quickly select this element to read or modify its content, style, or attributes.
const form = document.getElementById("myForm");
By Name:
In JavaScript, “By Name” refers to selecting HTML elements based on their name attribute using document.getElementsByName(). It returns all elements that share the specified name.
const form = document.forms["myForm"];
By Index (if multiple forms exist):
In JavaScript, when multiple elements share the same name or are part of a collection (like multiple <form> elements), you can access a specific element using its index in the collection.
const form = document.forms[0];
Once you have a reference to a form, there are several ways to access its inputs:
Via elements Collection:
The elements property of a form gives a collection of all its input elements. You can access an input by its name or id.
const input = form.elements["username"]; // Access input by name
By Query Selector:
You can use querySelector to select inputs inside a form using CSS selectors.
const input = document.querySelector("#myForm input[name='username']");
Getting and Setting Input Value:
Once you have the input element, you can read or modify its value using the .value property.
const value = form.elements["username"].value; // Get value
form.elements["username"].value = "newValue"; // Set value
Properties
| Property | Description |
|---|---|
form.elements |
Returns all input elements in the form |
element.value |
Gets or sets the input’s value |
element.name |
The name of the input field |
element.type |
Type of the input (text, checkbox, etc.) |
element.checked |
Boolean for checkbox/radio (true if checked) |
form.action |
Submission URL |
form.method |
HTTP method (get or post) |
Methods
| Method | Description |
|---|---|
form.submit() |
Programmatically submits the form |
form.reset() |
Resets form to initial values |
element.focus() |
Sets focus on an input |
element.blur() |
Removes focus from an input |
Submit Event
Triggered when the form is submitted. Use event.preventDefault() to stop default form submission (page reload) and handle data with JavaScript.
form.addEventListener("submit", (event) => {
event.preventDefault();
const username = form.elements["username"].value;
console.log("Submitted:", username);
});
Input Event (real-time changes)
Fires every time the value changes, useful for live feedback.
const input = form.elements["username"];
input.addEventListener("input", () => {
console.log("Typing:", input.value);
});
Change Event (after focus loss)
Triggered when the user leaves the input field after making a change.
input.addEventListener("change", () => {
console.log("Final value:", input.value);
});
Example — Simple Form with Validation
<!DOCTYPE html>
<html>
<body>
<form id="myForm">
<label>Username: <input type="text" name="username"></label>
<label>Email: <input type="email" name="email"></label>
<button type="submit">Submit</button>
</form>
<script>
const form = document.getElementById("myForm");
// Handle submission
form.addEventListener("submit", (e) => {
e.preventDefault();
const username = form.elements["username"].value;
const email = form.elements["email"].value;
console.log({ username, email });
if (!username) {
alert("Username is required!");
form.elements["username"].focus();
}
});
// Real-time email validation
form.elements["email"].addEventListener("input", (e) => {
e.target.style.border = e.target.value.includes("@")
? "2px solid green"
: "2px solid red";
});
</script>
</body>
</html>
Checkboxes / Radio Buttons:
Checkboxes and radio buttons have a checked property to determine their state.
const checkbox = form.elements["agree"];
console.log(checkbox.checked); // true if checked
checkbox.checked = true; // Programmatically check
Select Dropdowns:
Dropdowns use the value property for the selected option, and options + selectedIndex for more details.
const select = form.elements["color"];
console.log(select.value); // Selected option value
console.log(select.options[select.selectedIndex].text); // Option text
Looping Through Inputs:
You can iterate over all form elements using the elements collection.
const inputs = form.elements;
for (const input of inputs) {
console.log(input.name, input.value);
}
HTML5 Validation:
Use attributes like required, pattern, min, and max.
<input type="email" required
pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\\.[a-z]{2,}$">
You can check validity in JavaScript:
if (!form.checkValidity()) {
alert("Please fill out all required fields!");
}
Custom Validation:
if (!form.elements["username"].value.trim()) {
alert("Username cannot be empty!");
return false;
}