Forms
select & textarea
Dropdown & Multi-line Input
💡 <select> ek dropdown menu hai (jaise restaurant menu se ek dish choose karna), <textarea> ek bada khula page hai jaha paragraphs likh sakte ho (jaise "Comments" box), single-line <input> ke ulat.
<select> ek dropdown list banata hai, andar <option> elements choices hote hain. multiple attribute se multiple selections allow kar sakte ho. <textarea> multi-line text input hai — rows/cols se initial size set karte hain.
<label for="country">Country:</label>
<select id="country" name="country">
<option value="">-- Choose --</option>
<option value="in">India</option>
<option value="us">USA</option>
<option value="uk">UK</option>
</select>
<label for="comments">Comments:</label>
<textarea id="comments" name="comments" rows="4" cols="50" placeholder="Yahan likho..."></textarea>📜
<select> ek dropdown menu hai (jaise restaurant menu se ek dish choose karna), <textarea> ek bada khula page hai jaha paragraphs likh sakte ho (jaise "Comments" box), single-line <input> ke ulat.
1 / 2
⚡ Quick Recap
- select+option = dropdown, textarea = multi-line text
- multiple attribute = multiple options select ho sakte hain
- rows/cols = textarea ka initial visible size
Is page mein (2 subtopics)
<optgroup> select ke andar options ko visually group karta hai (jaise categories) — bade dropdowns (jaise "Country" ya "Product Category") ko organize karne mein useful.
<select name="food">
<optgroup label="Fruits">
<option value="apple">Apple</option>
<option value="banana">Banana</option>
</optgroup>
<optgroup label="Vegetables">
<option value="carrot">Carrot</option>
<option value="potato">Potato</option>
</optgroup>
</select>Tip: optgroup sirf visual grouping deta hai (dropdown mein sub-headings jaisa) — selected value par koi effect nahi, sirf browsing/scanning aasan banata hai.
Default textarea user ko resize karne deta hai (bottom-right corner se drag). CSS resize property se ye control kar sakte ho — none (resize disable), vertical (sirf height), both (default).
<textarea style="resize: vertical;" rows="4"></textarea>
<!-- User sirf height badha/ghata sakta hai, width fixed rahega -->
<textarea style="resize: none;" rows="4"></textarea>
<!-- Bilkul resize nahi hoga -->Tip: resize: none rigid layouts (jaise fixed-width chat interfaces) ke liye useful hai, lekin usually user ko textarea resize karne dena better UX hai — unhe control mein rakhta hai.