HTML Forms

1. HTML Forms Kya Hain?

HTML Forms ek tareeka hai jisme hum user se information lete hain aur us data ko server par process ke liye bhejte hain.

Example: Login form, Signup form, Search box, Feedback form, etc.

HTML form ke andar different input fields hote hain jaise text box, password field, checkboxes, radio buttons, dropdowns, file upload, etc.

2. HTML Form Syntax

<form action="/register" method="post">
  <label for="name">Name:</label>
  <input type="text" id="name" name="username">

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

Explanation:

• <form>: Form ka container hota hai.
• action: Data kis page (server file) ko bhejna hai ya konsa route handle karega, in this case /register route will handle it.
• method: Data send karne ka method: GET ya POST.

Ye terms thodi complex ho sakti hai lekin jab backend development seekhenge tab ye terms detail mein cover karenge.

3. HTML Form Attributes

1. action – Form submit hone par data kahan bhejna hai.
2. method –

• GET → GET request ek HTTP method hota hai. Jiska use data retrieve karne ke liye hota hai kisi specific resource. Jo data ye request karta hai wo data URL me show hota hai (search forms me use hota hai).
• POST → POST request bhi ek HTTP request lekin, ye data ko client side se server side par send karti hai aur ye data URL mein show nhi hota. Ye hidden hota hai, secure methods me use hota hai (login, signup).

1. target – Response kaha open hoga (_self, _blank).
2. enctype – File upload ke liye "multipart/form-data" ka use hota hai.
3. autocomplete – On/Off karke browser ki auto-suggestions ko control karte hain.

4. Common HTML Form Elements

1. Text Input

<input type="text" name="fullname" placeholder="Enter your name">

2 Password Field

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

3 Radio Buttons

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

(Same name attribute dena zaruri hai radio buttons ko group karne ke liye.)

4 Checkboxes

<input type="checkbox" name="hobby" value="coding"> Coding
<input type="checkbox" name="hobby" value="music"> Music

5 Dropdown (Select Menu)

<select name="country">
  <option value="india">India</option>
  <option value="usa">USA</option>
</select>

6 Textarea (Multi-line Text)

<textarea name="message" rows="5" cols="30"></textarea>

7 File Upload

<input type="file" name="profilepic">

8 Buttons

<input type="submit" value="Submit">
<input type="reset" value="Reset">
<button type="button">Click Me</button>

5. HTML Form Labels

<label> element ka use form ke <input> field se associate karne ke liye hota hai. Labels accessibility ko bhi improve karte hain.

<label for="email">Email </label>
<input type="email" id="email" name="email">

6. HTML5 Special Input Types

HTML5 kuch new input type introduce hue, jo data entry ko easy aur accurate banate hain:

• email
• number
• date
• url
• range
• color

Example:

<input type="email" name="useremail" required>

7. Form Validation

• Required Field → required attribute ka use.
• Pattern Matching → pattern attribute ka use.
• Min/Max Values → min, max.
• Length Control → minlength, maxlength.

Example:

<input type="text" name="username" required minlength="3" maxlength="15">

8. Form Submission Process

1. User form fill karta hai.
2. "Submit" button press hota hai.
3. Browser data ko server par bhejta hai (GET/POST).
4. Server data ko process karke response deta hai (success/error).

9. Example – Registration Form

<form action="/register" method="post">
  <label for="name">Name:</label>
  <input type="text" id="name" name="name" required>

  <label for="email">Email:</label>
  <input type="email" id="email" name="email" required>

  <label for="password">Password:</label>
  <input type="password" id="password" name="password" required>

  <label>Gender:</label>
  <input type="radio" name="gender" value="male"> Male
  <input type="radio" name="gender" value="female"> Female

  <label for="country">Country:</label>
  <select id="country" name="country">
    <option value="india">India</option>
    <option value="usa">USA</option>
  </select>

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

Conclusion

HTML Forms user aur server ke beech ek bridge ka kaam karte hain. Web development me forms samjhna bohot important hai kyunki user interaction ka sabse common method form hi hota hai. HTML5 ne forms ko aur powerful aur user-friendly banane ke liye multiple new input types aur validation features add kiye hain.