HTML Forms (Part 2): Select, Textarea, aur Checkboxes
Introduction
HTML Forms ka use websites me user input lene ke liye hota hai. Pichle lesson me humne basic inputs, labels aur buttons seekhe the.
Aaj hum forms ke aur important elements seekhenge:
<select>dropdown<textarea>multi-line inputCheckboxes
Form accessibility
Best practices
Ye elements contact forms, surveys, registrations aur feedback systems me bahut use hote hain.
<select> Tag Kya Hai?
<select> dropdown menu create karne ke liye use hota hai.
Example:
<select>
<option>HTML</option>
<option>CSS</option>
</select>
<option> Tag Kya Hai?
Dropdown ke andar choices define karne ke liye <option> tag use hota hai.
Example:
<option>JavaScript</option>
Complete Select Example
<label for="course">Choose Course</label>
<select id="course">
<option>HTML</option>
<option>CSS</option>
<option>JavaScript</option>
</select>
Default Selected Option
selected attribute default option choose karta hai.
Example:
<option selected>HTML</option>
Multiple Select
Ek se jyada options select karne ke liye:
<select multiple>
<option>HTML</option>
<option>CSS</option>
</select>
<textarea> Tag Kya Hai?
<textarea> multi-line text input ke liye use hota hai.
Example:
<textarea>
</textarea>
Textarea Ka Use
Feedback forms
Comments
Messages
Long descriptions
Textarea Example
<label for="message">Message</label>
<textarea id="message">
</textarea>
Rows aur Columns
Textarea ka size set karne ke liye:
<textarea rows="5" cols="30">
</textarea>
Placeholder in Textarea
Example:
<textarea placeholder="Enter your message">
</textarea>
Checkbox Kya Hai?
Checkbox multiple options select karne ke liye use hota hai.
Example:
<input type="checkbox">
Checkbox Example
<label>
<input type="checkbox">
I agree to terms
</label>
Multiple Checkbox Example
<h3>Select Skills</h3>
<label>
<input type="checkbox">
HTML
</label>
<br>
<label>
<input type="checkbox">
CSS
</label>
<br>
<label>
<input type="checkbox">
JavaScript
</label>
Checked Attribute
Default checkbox tick karne ke liye:
<input type="checkbox" checked>
Complete Form Example
<!DOCTYPE html>
<html>
<head>
<title>HTML Form Part 2</title>
</head>
<body>
<h1>Student Registration</h1>
<form>
<label for="course">
Choose Course
</label>
<br>
<select id="course">
<option>HTML</option>
<option>CSS</option>
<option>JavaScript</option>
</select>
<br><br>
<label for="message">
Message
</label>
<br>
<textarea id="message" rows="5" cols="30"
placeholder="Enter your message">
</textarea>
<br><br>
<h3>Skills</h3>
<label>
<input type="checkbox">
HTML
</label>
<br>
<label>
<input type="checkbox">
CSS
</label>
<br><br>
<button type="submit">
Submit
</button>
</form>
</body>
</html>
Accessibility Tips
1. Labels Use Karo
Har form field ke sath label use karo.
2. Clear Placeholder Do
User ko samajhna easy hota hai.
3. Proper Input Grouping
Related checkboxes ko group me rakho.
Common Beginner Mistakes
1. <option> Ko <select> Ke Bahar Likhna
Wrong:
<option>HTML</option>
Correct:
<select>
<option>HTML</option>
</select>
2. Textarea Closing Tag Bhool Jana
Wrong:
<textarea>
Correct:
<textarea>
</textarea>
3. Checkbox Ke Sath Label Na Use Karna
Accessibility affect hoti hai.
Mini Practice Task
Ek feedback form banao jisme:
Course dropdown
Message textarea
Skills checkboxes
ho.
Practice Code
<form>
<select>
<option>HTML</option>
<option>CSS</option>
</select>
<br><br>
<textarea placeholder="Feedback">
</textarea>
<br><br>
<label>
<input type="checkbox">
HTML
</label>
</form>
Interview Questions
Q1. Dropdown create karne ke liye kaunsa tag use hota hai?
<select>
Q2. Multi-line input ke liye kaunsa tag use hota hai?
<textarea>
Q3. Multiple options select karne ke liye kya use hota hai?
Checkboxes.
Conclusion
Aaj aapne HTML forms ke advanced elements jaise select, textarea aur checkboxes ko detail me seekha. Ye elements modern forms ka important part hote hain aur user interaction ko improve karte hain.