? JavaScript DOM Forms

⚡ Quick Overview

JavaScript can interact with HTML forms through the DOM to read user input, validate data, and control how the form is submitted. Using properties like document.forms, form.elements, and value, you can easily access and modify form fields without reloading the page.

? Key Concepts

Forms collection: document.forms gives access to all forms in the page.
Form elements: form.elements lets you access individual fields by their name attribute.
Value property: input.value gets or sets the current value of a form control.
Events: The submit event is used to handle form submission in JavaScript.
Preventing reload: event.preventDefault() stops the default page reload when a form is submitted.

? Common Form Elements

<input> (text, password, checkbox, radio, etc.)
<textarea> for multi-line text input
<select> for dropdown menus
<button> or <input type="submit"> to submit

? Syntax and Properties

Accessing a form and its elements using the DOM:

? View Code Example

Access form by name or id (using the forms collection)
const form = document.forms["myForm"];
Access input element by its name attribute
const usernameField = form.elements["username"];
Read current value
console.log(usernameField.value);

Getting and setting values of form inputs:

? View Code Example

Get input by id
const input = document.getElementById("email");
Get current value
console.log(input.value);
Set a new value
input.value = "newemail@example.com";

? Code Example: Simple DOM Form

HTML structure of the form:

? View Code Example

<form id="myForm">
  <label for="username">Username:</label>
  <input type="text" id="username" name="username" />

  <input type="submit" value="Submit" />
</form>

JavaScript to handle the form submission:

? View Code Example

const form = document.getElementById("myForm");

form.addEventListener("submit", function (event) {
  event.preventDefault();
  const username = form.elements["username"].value;
  alert("Username: " + username);
});

? Live Output and Interactive Example

Try typing a username in the field below and clicking Submit. JavaScript will intercept the form submission, prevent the page reload, and show the value right on the page.

? Output

Submitted username will appear here.

? Tips

Use form.elements["fieldName"] to access form controls by their name.
Always call event.preventDefault() in your submit handler when you want to handle data with JavaScript instead of reloading the page.
Attach your event listeners (like submit) after the DOM has loaded. You can place your script at the bottom of the HTML or use DOMContentLoaded.
Be consistent: either use getElementById() or form.elements["name"] and stick to a naming convention.

? Practice Tasks

Create a form with fields like email, password, and a <select> for user role. Read and log their values using JavaScript.
Add a checkbox (e.g., “Accept Terms”). Prevent form submission and show a message if the checkbox is not checked.
Modify an input's value programmatically (for example, auto-fill a default username) when the page loads.
Practice handling the submit event with event.preventDefault() and display the submitted data inside a custom <div> instead of using alert().