📋 Forms Handling DOM

Last Updated: May 2026

📂 Basic HTML Form Structure

<form id="myForm">
  <input type="text" id="username" placeholder="Enter name" name="username" />

  <input type="email" id="email" placeholder="Enter email" name="email" />

  <button type="submit">Submit</button>
</form>

Access Form Elements via individual IDs

<script>
  const username = document.getElementById("username");
  const email = document.getElementById("email");
  console.log(username);
  console.log(email);

  // Access Input Values
  console.log(username.value);
  console.log(email.value);
</script>

Access Form Elements via Form Object

Instead of selecting every input separately using getElementById(), JavaScript provides a Form Object that makes form handling much easier.
It use name attribute as key.
form.elements have collection of all form fields.
Directly access using form.elementsName property.

<script>
  const form = document.getElementById("myForm");
  const username = form.elements.username;
  const email = form.elements.email;
  console.log(username);
  console.log(email);
  // Access Input Values
  console.log(username.value);
  console.log(email.value);
</script>

<!-- OR  Use Shortcut Access -->

<script>
  const form = document.getElementById("myForm");
  const username = form.username;
  const email = form.email;
  console.log(username);
  console.log(email);
  // Access Input Values
  console.log(username.value);
  console.log(email.value);
</script>

Access Form Elements via FormData Object (Modern Approach)

It is a easier way to access form data.
It is a collection of all form fields.
formData.entries() have collection of all form fields.
formData.get('name') get value of name attribute.
formData.set('name', 'value') set value of name attribute.
formData.append('name', 'value') append value of name attribute.
formData.delete('name') delete value of name attribute.

<script>
  const form = document.getElementById("myForm");
  const formData = new FormData(form);
  console.log(formData);
  console.log(formData.get("username"));
  console.log(formData.get("email"));
</script>

Convert Entire Form into Object

<script>
  const form = document.getElementById("myForm");
  const formData = new FormData(form);
  const formObject = Object.fromEntries(formData);
  console.log(formObject);
</script>

Output
{
  "username": "Shivam",
  "email": "shivam@tukkalearn.in"
}

🗣 Hinglish Tip: Ye React, Next.js, APIs aur backend submission me bahut use hota hai.

🎯 Form Submit Event

JavaScript uses the submit event to detect form submission.

<script>
  form.addEventListener("submit", function (event) {
    event.preventDefault();

    const userValue = username.value;
    const emailValue = email.value;

    console.log(userValue);
    console.log(emailValue);
  });
</script>

🚫 Prevent Page Reload

By default, form submit reloads the page.

Use:

event.preventDefault();

🗣 Hinglish Tip: preventDefault() browser ka default behavior rok deta hai.

🎯 Checkbox Handling

<input type="checkbox" id="agree" />

const agree = document.getElementById("agree").checked;

console.log(agree);

🔘 Radio Button Handling

<input type="radio" name="gender" value="Male" />
<input type="radio" name="gender" value="Female" />

const gender = document.querySelector('input[name="gender"]:checked').value;

console.log(gender);

📋 Select Dropdown Handling

<select id="country">
  <option>India</option>
  <option>USA</option>
</select>

const country = document.getElementById("country").value;

console.log(country);

🧹 Reset Form

form.reset();

📡 Sending Form Data to Server

Using fetch()

fetch("https://api.example.com/data", {
  method: "POST",
  headers: {
    "Content-Type": "application/json",
  },
  body: JSON.stringify({
    username: username,
    email: email,
  }),
})
  .then((response) => response.json())
  .then((data) => console.log(data));

💡 Quick Practice

Create a complete registration form with the following fields and errors handling:

Name
Email
Password
Confirm Password
Gender
Country Dropdown
Terms Checkbox
Submit Button
Reset Button

← Previous Next →