Here is a detailed, MCA-level explanation (website-ready) of

🌐 The Form Object in JavaScript

and its Elements & Methods (with examples)

🧠 1. The Form Object

In JavaScript, a Form Object represents an HTML <form> and provides access to its elements, properties, and methods.

👉 It is part of the Document Object Model (DOM).

🔹 Accessing a Form

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

<script>
  let form = document.forms["myForm"];
  console.log(form);
</script>

📌 Key Properties:

document.forms → collection of all forms
form.elements → access all elements inside form

⚙️ 2. Form Object Methods

Method	Description
`submit()`	Submits the form
`reset()`	Resets all fields
`focus()`	Focus on input field
`blur()`	Removes focus

🧩 3. Form Elements with Examples

✍️ (1) Text Element

Used to input single-line text.

<input type="text" id="name">

<script>
  let val = document.getElementById("name").value;
  console.log(val);
</script>

🔒 (2) Password Element

Used to input hidden text (password).

<input type="password" id="pass">

<script>
  let pwd = document.getElementById("pass").value;
</script>

🔘 (3) Button Element

Triggers JavaScript functions.

<button onclick="show()">Click</button>

<script>
function show() {
  alert("Button Clicked");
}
</script>

📤 (4) Submit Button

Submits form data to server.

<form onsubmit="return validate()">
  <input type="text" id="user">
  <input type="submit" value="Submit">
</form>

<script>
function validate() {
  let u = document.getElementById("user").value;
  if(u === "") {
    alert("Enter name");
    return false;
  }
}
</script>

🔄 (5) Reset Button

Resets all form fields.

<form>
  <input type="text" id="name">
  <input type="reset" value="Reset">
</form>

☑️ (6) Checkbox Element

Allows multiple selections.

<input type="checkbox" id="chk"> Accept Terms

<script>
  let status = document.getElementById("chk").checked;
</script>

🔘 (7) Radio Element

Allows single selection from a group.

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

let radios = document.getElementsByName("gender");
for(let r of radios) {
  if(r.checked) {
    console.log(r.value);
  }
}

📝 (8) TextArea Element

Used for multi-line input.

<textarea id="msg"></textarea>

<script>
  let message = document.getElementById("msg").value;
</script>

📋 (9) Select and Option Element

Used to create dropdown lists.

<select id="city">
  <option value="Delhi">Delhi</option>
  <option value="Mumbai">Mumbai</option>
</select>

<script>
  let city = document.getElementById("city").value;
</script>

🔢 (10) Multi-Choice Select List