HTML Forms (Part 1): Inputs, Labels, aur Buttons
Introduction
Websites par jab bhi aap login karte ho, signup karte ho, search karte ho ya feedback dete ho, tab HTML Forms ka use hota hai.
Forms users se data collect karne ke liye use kiye jate hain.
Aaj hum seekhenge:
HTML form kya hota hai
<form>tag<input>types<label>tag<button>tagForm accessibility basics
HTML Form Kya Hota Hai?
HTML form user input collect karne ke liye use hota hai.
Examples:
Login Form
Signup Form
Contact Form
Search Box
<form> Tag Kya Hai?
<form> HTML form ka main container hota hai.
Example:
<form>
</form>
<form> Tag Ka Use
User data collect karna
Input fields group karna
Data server ko send karna
Basic Form Example
<form>
<input type="text">
<button>Submit</button>
</form>
<input> Tag Kya Hai?
<input> user se data lene ke liye use hota hai.
Example:
<input type="text">
Input Types
HTML me different types ke inputs hote hain.
1. Text Input
Normal text enter karne ke liye.
Example:
<input type="text">
2. Password Input
Password hide karke show karta hai.
Example:
<input type="password">
3. Email Input
Email address lene ke liye.
Example:
<input type="email">
4. Number Input
Numbers enter karne ke liye.
Example:
<input type="number">
5. Checkbox Input
Multiple options select karne ke liye.
Example:
<input type="checkbox">
6. Radio Input
Ek option select karne ke liye.
Example:
<input type="radio">
Placeholder Attribute
Input ke andar hint text show karta hai.
Example:
<input type="text" placeholder="Enter your name">
Required Attribute
Field ko mandatory banata hai.
Example:
<input type="email" required>
<label> Tag Kya Hai?
<label> input field ka description show karta hai.
Example:
<label>Name</label>
<input type="text">
Label Ka Importance
Accessibility improve karta hai
Users ko field samajhne me help karta hai
Screen readers ke liye useful hai
Best Practice: Label with for
Example:
<label for="email">Email</label>
<input type="email" id="email">
<button> Tag Kya Hai?
Button actions perform karne ke liye use hota hai.
Example:
<button>Submit</button>
Button Types
| Type | Use |
|---|---|
submit | Form submit karta hai |
reset | Form reset karta hai |
button | Custom action |
Submit Button Example
<button type="submit">
Login
</button>
Reset Button Example
<button type="reset">
Reset
</button>
Complete Form Example
<!DOCTYPE html>
<html>
<head>
<title>HTML Form</title>
</head>
<body>
<h1>Registration Form</h1>
<form>
<label for="name">Name</label>
<input type="text" id="name" placeholder="Enter your name">
<br><br>
<label for="email">Email</label>
<input type="email" id="email" required>
<br><br>
<label for="password">Password</label>
<input type="password" id="password">
<br><br>
<button type="submit">
Submit
</button>
</form>
</body>
</html>
Accessibility Tips
1. Labels Hamesha Use Karo
Inputs bina labels ke confusing ho sakte hain.
2. Proper Input Types Use Karo
Email field me type="email" use karo.
3. Placeholder Par Depend Mat Raho
Labels bhi use karo.
Common Beginner Mistakes
1. Labels Skip Karna
Accessibility aur usability dono affect hoti hain.
2. Wrong Input Type Use Karna
Example:
<input type="text">
instead of:
<input type="email">
3. Form Closing Tag Bhool Jana
Every form properly close karo.
Mini Practice Task
Ek simple login form banao jisme:
Name field
Email field
Password field
Submit button
ho.
Practice Code
<form>
<label>Name</label>
<input type="text">
<br><br>
<label>Password</label>
<input type="password">
<br><br>
<button>
Login
</button>
</form>
Interview Questions
Q1. User input lene ke liye kaunsa tag use hota hai?
<input>
Q2. Form container ke liye kaunsa tag use hota hai?
<form>
Q3. Label ka use kya hai?
Input field ka description dena aur accessibility improve karna.
Conclusion
Aaj aapne HTML forms ke basic concepts ko detail me seekha. Forms har dynamic website ka important part hote hain. Proper labels aur input types use karna accessibility aur user experience dono improve karta hai.