5-Forms

1. Concept of a Form

1. A form is an HTML structure that allows users to input data and submit it to the server or process it via JavaScript.
2. Forms are essential for creating dynamic and interactive websites.

---

2. How Forms Work

1. User enters data into form fields (text, checkbox, etc.).

2. When the form is submitted, the data is sent:

   • To the server using GET or POST methods, or

   • Handled on the client-side via JavaScript for validation or processing.

3. Data is usually captured using the form tag and various form elements.

---

3. Form Elements and Input Types

Element	Description	Syntax Example
Text	Single-line text input	<input type="text" name="username" />
Password	Hides characters	<input type="password" name="pass" />
Button	Generic clickable button	<button>Click</button>
Submit	Submits the form	<input type="submit" value="Send" />
Reset	Resets the form fields	<input type="reset" value="Clear" />
Checkbox	Multiple selections allowed	<input type="checkbox" value="Math" />
Radio	Single selection in a group	<input type="radio" name="gender" value="M" />
Textarea	Multi-line input	<textarea name="comments"></textarea>
Select & Option	Dropdown list	<select><option>Option 1</option></select>

---

4. Properties of Form Elements

Property	Description
name	Identifier used for data submission
value	The current value of the element
type	Type of input (text, password, etc.)
placeholder	Shows a hint in input field
checked	Whether checkbox/radio is selected
disabled	Disables the element
required	Makes field mandatory
readonly	Makes field non-editable

---

5. Form Object Methods

Method	Description
submit()	Submits the form via script
reset()	Resets the form via script
focus()	Focuses a specific input field

---

6. JavaScript Built-in Objects

A. String Object

• Represents and manipulates text.
• Common methods:
  • length, toUpperCase(), toLowerCase(), includes(), slice(), replace()

B. Math Object

• Provides mathematical constants and functions.
• Examles:
  • Math.round(), Math.random(), Math.max(), Math.sqrt()

C. Date Object

• Handles dates and times.
• Examples:
  • new Date(), getFullYear(), getMonth(), getDate()

D. RegExp (Regular Expressions)

• Used for pattern matching in strings
• Syntax: /pattern/
• Example: /^\d{10}$/ matches a 10-digit number.

---

7. Form Validation

Purpose:

• Ensures user inputs are correct before submission.

Types:

1. HTML5 Validation
   • Uses required, type="email", pattern, etc.
2. JavaScript Validation

• Custom logic using conditions and RegExp.

Example:

<input type="email" id="email" required />

let email = document.getElementById("email").value;
if (!email.includes("@")) {
  alert("Enter a valid email address");
}

---

Conclusion

• Forms are vital for capturing user data.

• CSS enhances form layout and appearance.

• JavaScript ensures data validation and dynamic behavior.

• Mastery of form elements, properties, and built-in objects is essential for modern web development.