HTML Forms aur Inputs Tags Kya Hain?

HTML Forms ka Introduction

HTML forms web pages par user se data collect karne ka ek powerful tool hain. Yeh forms alag-alag types ke input fields ka use karke user interaction ko enable karte hain. Har form <form> tag ke andar define hota hai, jisme text fields, checkboxes, radio buttons, aur submit buttons jaise inputs hote hain.

Basic Form Structure

Ek basic form me action attribute hota hai jo batata hai ki data kahan submit hoga, aur method attribute (GET ya POST) batata hai ki data kaise bheja jayega.

<form action="/submit-data" method="POST">
  <label for="name">Name:</label>
  <input type="text" id="name" name="name" required>
  <br><br>
  <label for="email">Email:</label>
  <input type="email" id="email" name="email" required>
  <br><br>
  <input type="submit" value="Submit">
</form>

Common Form Elements

Form ke andar alag-alag kaam ke liye different tags use hote hain.

1. <label> Tag

<label> tag kisi input field ke sath text associate karne ke liye use hota hai. Isse accessibility improve hoti hai.

<label for="name">Naam:</label>
<input type="text" id="name" name="name">

2. <textarea> Tag

Jab user se multi-line text (jaise message ya comment) lena ho, tab <textarea> ka use hota hai.

<textarea name="message" rows="4" cols="30" placeholder="Apna message likhein..."></textarea>

3. <select> aur <option> Tags

Dropdown list banane ke liye <select> aur uske andar options ke liye <option> ka use hota hai.

<label for="city">Sheher Chunein:</label>
<select id="city" name="city">
  <option value="delhi">Delhi</option>
  <option value="mumbai" selected>Mumbai</option>
</select>

4. <fieldset> aur <legend> Tags

Related form fields ko ek group me rakhne ke liye <fieldset> aur us group ko title dene ke liye <legend> ka use hota hai.

<fieldset>
  <legend>Personal Details</legend>
  <label for="fname">First Name:</label>
  <input type="text" id="fname" name="fname">
</fieldset>

Input Types

<input> tag sabse versatile form element hai. Iska behavior type attribute se decide hota hai.

• type="text": Single-line text input.
• type="password": Characters ko mask kar deta hai.
• type="email": Valid email format ke liye browser validation.
• type="number": Sirf numbers allow karta hai.
• type="radio": Multiple options me se ek select karne ke liye.
• type="checkbox": Zero ya multiple options select karne ke liye.
• type="date": Date picker provide karta hai.
• type="file": File upload karne ke liye.
• type="submit": Form ko submit karta hai.
• type="reset": Form fields ko default value par reset karta hai.

Input Attributes

Input fields ko aur control karne ke liye in attributes ka use hota hai.

• required: Field ko mandatory banata hai.
• placeholder: User ke liye hint text dikhata hai.
• readonly: User field ko edit nahi kar sakta, par value submit hoti hai.
• disabled: Field ko completely disable kar deta hai. Value submit nahi hoti.
• value: Input field ki default value set karta hai.

<input type="text" name="username" value="Sandeep123" readonly>

HTML5 Form Validation

HTML5 client-side validation ke liye attributes provide karta hai.

• pattern: Ek specific format (RegEx) enforce karta hai. (e.g., `pattern="[0-9]10"`)
• min & max: Number ya date input ke liye range define karte hain.
• step: Number input ke liye valid increments set karta hai (e.g., `step="10"`).

<input type="number" id="age" name="age" min="18" max="60">

Key Takeaways

• <form> tag user se data collect karne ke liye container ka kaam karta hai.
• <input> tag ka `type` attribute decide karta hai ki kis tarah ka data liya jayega.
• <label> tag accessibility aur user experience ke liye zaroori hai.
• required, pattern, min, aur max jaise attributes se basic client-side validation kiya ja sakta hai.
• Related fields ko group karne ke liye <fieldset> ka use karein.