🔶 Form Object in HTML and JavaScript
The Form Object represents an HTML <form> element in JavaScript. It allows access to
form controls and data.
Example HTML Form:
html
CopyEdit
<form name="myForm" id="myForm">
<!-- Form elements go here -->
</form>
Accessing the Form Object in JavaScript:
javascript
CopyEdit
let form = [Link]["myForm"];
// or
let form = [Link]("myForm");
📌 Form Elements and Their Methods
Here are the main elements inside a form and how you interact with them:
1. Text Element (<input type="text">)
Purpose: Accepts a single line of text.
html
CopyEdit
<input type="text" name="username" id="username">
JavaScript:
javascript
CopyEdit
let username = [Link]("username").value;
2. Password Element (<input type="password">)
Purpose: Accepts a password input (characters are masked).
html
CopyEdit
<input type="password" name="password" id="password">
JavaScript:
javascript
CopyEdit
let password = [Link]("password").value;
3. Button Element (<button> or <input type="button">)
Purpose: Performs an action (usually tied to JavaScript).
html
CopyEdit
<button onclick="alert('Clicked!')">Click Me</button>
<!-- OR -->
<input type="button" value="Click Me" onclick="alert('Clicked!')">
4. Submit Button Element (<input type="submit"> or <button type="submit">)
Purpose: Submits the form data to the server.
html
CopyEdit
<input type="submit" value="Submit">
<!-- OR -->
<button type="submit">Submit</button>
5. Reset Button Element (<input type="reset">)
Purpose: Resets form fields to their default values.
html
CopyEdit
<input type="reset" value="Reset">
6. Checkbox Element (<input type="checkbox">)
Purpose: Allows selection of multiple options (toggle on/off).
html
CopyEdit
<input type="checkbox" id="subscribe" name="subscribe" value="newsletter">
JavaScript:
javascript
CopyEdit
let isChecked = [Link]("subscribe").checked;
7. Radio Element (<input type="radio">)
Purpose: Allows one option to be selected from a group.
html
CopyEdit
<input type="radio" name="gender" value="male"> Male
<input type="radio" name="gender" value="female"> Female
JavaScript:
javascript
CopyEdit
let gender = [Link]('input[name="gender"]:checked').value;
8. Text Area Element (<textarea>)
Purpose: Allows multi-line text input.
html
CopyEdit
<textarea name="message" id="message"></textarea>
JavaScript:
javascript
CopyEdit
let message = [Link]("message").value;
9. Select and Option Elements (<select>, <option>)
Purpose: Creates a dropdown list.
html
CopyEdit
<select name="country" id="country">
<option value="usa">USA</option>
<option value="uk">UK</option>
</select>
JavaScript:
javascript
CopyEdit
let selectedCountry = [Link]("country").value;
10. Multi-Choice Select Lists
Purpose: Allows selecting multiple options from a dropdown.
html
CopyEdit
<select name="languages" id="languages" multiple>
<option value="javascript">JavaScript</option>
<option value="python">Python</option>
<option value="java">Java</option>
</select>
JavaScript:
javascript
CopyEdit
let selectedLanguages =
[Link]([Link]("languages").selectedOptions).map(option
=> [Link]
🟨 JavaScript Introduction
🔹 What is JavaScript?
JavaScript (JS) is a scripting language used to create and control dynamic website content—
like interactive forms, animated graphics, or data updates without page reloads.
📍 Where to Use JavaScript?
1. Inline:
html
CopyEdit
<button onclick="alert('Hello!')">Click Me</button>
2. Internal (in <script> tag):
html
CopyEdit
<script>
alert("Hello from JS!");
</script>
3. External File (Recommended):
html
CopyEdit
<script src="[Link]"></script>
📤 Output in JavaScript
alert("Hello"); – Pop-up alert box
[Link]("Hello"); – Developer console
[Link]("Hello"); – Writes directly to the HTML page
innerHTML – Injects content into HTML elements
🔠 JavaScript Syntax & Statements
Statements end with semicolons (;)
Case-sensitive
Blocks are defined by {}
javascript
CopyEdit
let x = 10;
if (x > 5) {
[Link]("Greater than 5");
}
💬 Comments
javascript
CopyEdit
// This is a single-line comment
/*
This is a
multi-line comment
*/
📦 Variables
javascript
CopyEdit
var x = 5; // Old
let y = 10; // Modern, block-scoped
const z = 15; // Constant
➕ Operators
Arithmetic:
+ - * / % ** ++ --
Assignment:
= += -= *= /= %=
🔢 Data Types
Number
String
Boolean
Object
Array
Null
Undefined
Functions
javascript
CopyEdit
function greet(name) {
return "Hello " + name;
}
[Link](greet("Alice"));
🧱 Objects
javascript
CopyEdit
let person = {
name: "John",
age: 30,
greet: function () {
return "Hi, I'm " + [Link];
}
};
⚡ Events
html
CopyEdit
<button onclick="sayHi()">Click</button>
<script>
function sayHi() {
alert("Hi!");
}
</script>
🔤 Strings & String Methods
javascript
CopyEdit
let text = "Hello";
[Link];
[Link]();
[Link]("e");
[Link]("Hello", "Hi");
🔢 Numbers & Number Methods
javascript
CopyEdit
let x = 123.456;
[Link](2); // "123.46"
parseInt("10"); // 10
parseFloat("10.5"); // 10.5
📚 Arrays & Methods
javascript
CopyEdit
let colors = ["red", "blue", "green"];
[Link]("yellow");
[Link]();
[Link]("blue");
Array Sort:
javascript
CopyEdit
[Link](); // Alphabetical
Array Iteration:
javascript
CopyEdit
[Link](color => [Link](color));
📆 Dates & Methods
javascript
CopyEdit
let now = new Date();
[Link]();
[Link]();
[Link](2025);
Date Formats:
javascript
CopyEdit
[Link]();
[Link]();
➗ Math Object
javascript
CopyEdit
[Link](4.6);
[Link](4.9);
[Link](); // 0 to 1
[Link](1, 5, 10);
✅ Booleans
javascript
CopyEdit
true, false
Boolean(0); // false
Boolean("hello"); // true
🔍 Comparisons
javascript
CopyEdit
== // equal value
=== // equal value & type
!= // not equal
<, >, <=, >=
🧾 Conditions
javascript
CopyEdit
if (x > 10) {
// do something
} else if (x == 10) {
// something else
} else {
// default
}
🔀 Switch Statement
javascript
CopyEdit
switch(day) {
case 1: alert("Monday"); break;
case 2: alert("Tuesday"); break;
default: alert("Another day");
}
🔁 Loops
For Loop:
javascript
CopyEdit
for (let i = 0; i < 5; i++) {
[Link](i);
}
While Loop:
javascript
CopyEdit
let i = 0;
while (i < 5) {
[Link](i);
i++;
}
Break:
javascript
CopyEdit
for (let i = 0; i < 10; i++) {
if (i === 5) break;
[Link](i);
}