HTML Forms kya hota hai ?
HTML forms web pages par user se data collect karne ka ek powerful tool hain. Ye forms alag-alag types ke input fields ka use karke user interaction ko enable karte hain.
Ek basic HTML form <form> tag ke andar define hota hai, jisme text fields, checkboxes, radio buttons, dropdowns, password fields, file uploads, aur submit buttons jaise inputs hote hain. Har input field ka apna ek name hota hai jo server par data bhejne me madad karta hai.
Form ke andar action attribute data submit karne ke URL ko specify karta hai aur method attribute GET ya POST request define karta hai. Forms ko JavaScript aur CSS ke saath aur interactive aur user-friendly banaya ja sakta hai.
Basic Form Structure :
<form action="submit.php" method="POST">
<label for="name">Name:</label>
<input type="text" id="name" name="name" required>
<br>
<label for="email">Email:</label>
<input type="email" id="email" name="email" required>
<br>
<input type="submit" value="Submit">
</form>Output :
Explanation:
action="submit.php"– Yeh specify karta hai ki form ka data kis file ko send hoga.method="POST"– Yeh specify karta hai ki data securely send hoga. (Agar “GET” hota toh URL me data show hota).input type="text"– Yeh ek text box provide karta hai.required– Iska use mandatory fields ke liye hota hai.
Form Elements (<label>, <textarea>, <select>, <option>, <fieldset> <legend>):
HTML forms user se input lene ke liye use hote hain. Isme alag-alag form elements hote hain jo different types ke inputs ko handle karte hain.
1. <label> Tag :
<label> tag kisi input field ke sath text associate karne ke liye use hota hai. Isse accessibility improve hoti hai aur form fields ko click karne par focus milta hai.
<label for="name">Naam:</label>
<input type="text" id="name" name="name">Output :
2. <textarea> Tag :
Jab hume user se multi-line text lena ho, tab <textarea> ka use hota hai.
<label for="message">Message likhein:</label>
<textarea id="message" name="message" rows="4" cols="30" placeholder="Apna message likhein..."></textarea>Output :
3. <select> aur <option> Tag:
Dropdown list banane ke liye <select> aur <option> ka use hota hai. Isse user ek ya multiple options select kar sakta hai.
<label for="city">Sheher Chunein:</label>
<select id="city" name="city">
<option value="delhi">Delhi</option>
<option value="mumbai">Mumbai</option>
<option value="kolkata">Kolkata</option>
</select>Output :
4. <fieldset> aur <legend> Tag:
Form ke different sections ko group karne ke liye <fieldset> ka use hota hai, aur <legend> us section ka title define karta hai.
<form>
<fieldset>
<legend>Personal Details</legend>
<label for="fname">Pehla Naam:</label>
<input type="text" id="fname" name="fname">
<label for="lname">Aakhri Naam:</label>
<input type="text" id="lname" name="lname">
</fieldset>
</form>Output :
<fieldset> ek box create karta hai jo related input fields ko group karta hai.
<legend> us group ka title define karta hai.
Input Types (<input>):
<input> tag ka use HTML forms mein user se data collect karne ke liye hota hai. Isme alag-alag input types hote hain jo different tarike ka data accept karte hain.
Types of Input:
1. Text Input (type=”text”)
Yeh ek simple text field hota hai jo user se short text lene ke liye use hota hai.
<label for="name">Naam:</label> <input type="text" id="name" name="name" placeholder="Apna naam likhein">
placeholder user ko hint dene ke liye hota hai.
2. Password Input (type=”password”)
Yeh input password lene ke liye hota hai jo dots (•••) ya stars (***) ke form me show hota hai.
<label for="password">Password:</label> <input type="password" id="password" name="password">
User jo bhi type karega, woh hide rahega.
3. Email Input (type=”email”)
Yeh sirf valid email addresses accept karta hai.
<label for="email">Email:</label> <input type="email" id="email" name="email">
Agar email format galat hoga, to browser error show karega.
4. Number Input (type=”number”)
Yeh sirf numeric values accept karta hai.
<label for="age">Umar:</label> <input type="number" id="age" name="age" min="18" max="60">
min aur max values ko restrict karne ke liye use hote hain.
5. Radio Button (type=”radio”)
Radio buttons ka use tab hota hai jab user sirf ek option select kar sakta hai.
<label><input type="radio" name="gender" value="male"> Male</label> <label><input type="radio" name="gender" value="female"> Female</label>
Ek group ke andar sirf ek radio button select hoga.
6. Checkbox (type=”checkbox”)
Checkboxes ka use tab hota hai jab user multiple options select kar sakta hai.
<label><input type="checkbox" name="hobby" value="reading"> Reading</label> <label><input type="checkbox" name="hobby" value="music"> Music</label>
User ek ya zyada checkboxes select kar sakta hai.
7. Date Input (type=”date”)
Yeh user se date lene ke liye use hota hai.
<label for="dob">Janmadin:</label> <input type="date" id="dob" name="dob">
Browser ek date picker provide karega.
8. Time Input (type=”time”)
Yeh user se time input lene ke liye use hota hai.
<label for="time">Samay:</label> <input type="time" id="time" name="time">
User clock se time select kar sakta hai.
9. File Upload (type=”file”)
Yeh user ko file upload karne ki permission deta hai.
<label for="file">File Upload karein:</label> <input type="file" id="file" name="file">
Agar images ya specific files upload karni ho to restrictions set kar sakte hain.
10. Submit Button (type=”submit”):
Yeh button form submit karne ke liye hota hai.
<input type="submit" value="Submit">
Form ka data server pe bhejne ke liye use hota hai.
11. Reset Button (type=”reset”):
Yeh form reset karne ke liye hota hai.
<input type="reset" value="Reset">
Yeh sare fields ko default state pe le jata hai.
Input Attributes (required, placeholder, readonly, disabled):
1. required Attribute :
Yeh attribute ensure karta hai ki input field empty nahi chhoda ja sakta.
<label for="name">Naam:</label> <input type="text" id="name" name="name" required>
Agar user is field ko fill nahi karega, to form submit nahi hoga.
2. placeholder Attribute :
Yeh user ko field me kya dalna hai iska ek hint dikhata hai.
<label for="email">Email:</label> <input type="email" id="email" name="email" placeholder="[email protected]">
Yeh sirf ek guide hota hai, jo user input dete hi remove ho jata hai.
3. readonly Attribute :
Yeh input field ko editable nahi hone deta, lekin user iska content copy kar sakta hai.
<label for="username">Username:</label> <input type="text" id="username" name="username" value="Sandeep123" readonly>
User isme kuch type nahi kar sakta, but content copy ho sakta hai.
4. disabled Attribute:
Yeh input field ko completely disable kar deta hai, aur yeh form ke sath submit bhi nahi hota.
<label for="phone">Phone Number:</label> <input type="text" id="phone" name="phone" value="9876543210" disabled>
User isko edit nahi kar sakta, aur yeh form ke sath submit bhi nahi hoga.
Form Validation (pattern, min, max, step):
HTML form validation attributes user input ko check karne aur galat data submit hone se rokne ke liye kaam aate hain. Yahaan hum pattern, min, max, aur step attributes ke baare mein detail mein samjhenge
1. pattern Attribute :
Agar kisi input field ke liye specific format chahiye (jaise ki phone number ya password), to hum pattern attribute use karte hain.
<label for="phone">Phone Number:</label>
<input type="text" id="phone" name="phone" pattern="[0-9]{10}" required>
Is example me sirf 10 digits ka number allow hoga, warna error show hoga.
Valid: 9876543210
Invalid: 98765abc10
2. min Attribute:
Yeh kisi numeric input ke minimum value ko set karta hai.
<label for="age">Age:</label> <input type="number" id="age" name="age" min="18">
Is example me sirf 18 ya usse bada number allow hoga.
Valid: 18, 25, 40
Invalid: 15, 10
3. max Attribute :
Yeh kisi numeric input ke maximum value ko set karta hai.
<label for="quantity">Items:</label> <input type="number" id="quantity" name="quantity" max="5">
User sirf 5 ya usse kam items select kar sakta hai.
Valid: 1, 3, 5
Invalid: 6, 10
4. step Attribute:
Yeh kisi numeric input ka increase/decrease step define karta hai.
<label for="price">Price (Multiples of 10):</label> <input type="number" id="price" name="price" step="10">
Sirf 10, 20, 30 jaise values allow hongi.
Valid: 10, 20, 50
Invalid: 12, 25
HTML5 Form Enhancements (datalist, output):
HTML5 ne forms mein kuch important enhancements diye hain jo user experience aur form functionality ko improve karte hain. In enhancements mein datalist aur output attributes kaafi useful hote hain.
1. datalist Element :
datalist element ko use karke hum predefined options provide kar sakte hain. Yeh input field ko suggested options dikhata hai jab user input kar raha ho.
<label for="fruits">Choose a fruit:</label> <input list="fruits" id="fruit" name="fruit"> <datalist id="fruits"> <option value="Apple"> <option value="Banana"> <option value="Mango"> <option value="Orange"> </datalist>
Is example mein jab user fruit input field mein kuch type karega, to uske paas available options show honge.
User ko suggestions milenge, jaise ki Apple, Banana, Mango.
Agar user manually koi input kare jo options mein nahi hai, to wo bhi valid hoga.
2. output Element:
output element ko use karke hum form ke result ya calculation ko display kar sakte hain. Yeh dynamic calculations ke liye useful hota hai, jaise kisi form ke fields ke beech ka result.
<form oninput="result.value=parseInt(a.value)+parseInt(b.value)"> <label for="a">A:</label> <input type="number" id="a" value="50"> <label for="b">B:</label> <input type="number" id="b" value="20"> <br> Total: <output name="result" for="a b">70</output> </form>
Is example mein jab user A aur B ke inputs change karega, to total automatic calculate hoga aur output element mein dikhai dega.
Quiz: Test Your Knowledge on HTML Forms & Input Tags
Bonus: Practical Application!
Try creating a simple form on your webpage today! Use tags like <form>, <input>, and <label> to structure your form properly for better accessibility and user experience.