📘 Lesson  ·  Lesson 21

Form Elements: select, textarea, button

Form Elements: select, textarea, button

select — the Dropdown

<label for="cls">Class:</label>
<select id="cls" name="class">
    <option value="">-- Select Class --</option>
    <option value="9">Class 9</option>
    <option value="10" selected>Class 10</option>
    <option value="11">Class 11</option>
</select>
Class: [ Class 10 ▼ ] ← opens a list on click; Class 10 pre-selected
Three details professionals never skip: (1) the first empty "-- Select --" option, so a real choice is deliberate, not accidental; (2) value vs display text — the user sees "Class 10" but the server receives class=10 (clean data for your database); (3) selected pre-picks an option. For long related lists, wrap options in <optgroup label="Science Stream"> — the browser renders bold group headings inside the dropdown.

textarea — when one line is not enough

<label for="addr">Address:</label>
<textarea id="addr" name="address" rows="4" cols="40"
          placeholder="House no, street, city, PIN..."></textarea>
Address: ┌────────────────────────┐ │ │ │ │ ← 4 lines tall, drag-corner to resize └────────────────────────┘
Two traps: (1) textarea is NOT an input — it's a pair tag, and its default value goes BETWEEN the tags, not in a value attribute. (2) Whatever whitespace you leave between the tags becomes the field's starting content — <textarea> </textarea> starts with mysterious spaces. Keep the tags touching: <textarea></textarea>.

button — and its 3 types

<button type="submit">Send Application</button>   sends the form
<button type="reset">Clear Form</button>          empties all fields
<button type="button">Check Fees</button>         does NOTHING (JS hooks here)
The trap that bites everyone once: inside a form, a button's DEFAULT type is submit. Add a "Show/Hide password" button without type="button" and clicking it SUBMITS the whole half-filled form. Rule: every non-submitting button inside a form gets an explicit type="button". (Old-style <input type="submit" value="Send"> still works; <button> is preferred since it can contain icons and markup.)

fieldset + legend — grouping a big form

<fieldset>
    <legend>Student Details</legend>
    ...name, class, DOB fields...
</fieldset>
<fieldset>
    <legend>Parent Details</legend>
    ...father name, mobile fields...
</fieldset>
┌─ Student Details ──────────────┐ │ name, class, DOB fields │ └────────────────────────────────┘ ┌─ Parent Details ───────────────┐ │ father name, mobile fields │ └────────────────────────────────┘

A visible titled box around related fields — the admission-form sections you have seen on paper, now in HTML. Screen readers announce the legend with every field inside ("Parent Details — Mobile"), a big accessibility win on long forms.

datalist — a text field WITH suggestions

<label for="city">City:</label>
<input list="cities" id="city" name="city">
<datalist id="cities">
    <option value="Aligarh">
    <option value="Agra">
    <option value="Bulandshahr">
    <option value="Khurja">
</datalist>
City: [ Al| ] ┌────────────┐ │ Aligarh │ ← typing filters the suggestions live └────────────┘
select vs datalist — the interview differentiator: select = choose ONLY from the list (strict); datalist = suggestions appear while typing but the user may type ANYTHING else too (flexible). City fields, search boxes → datalist; class/gender where only fixed values are valid → select. The glue is list attribute on the input matching the datalist's id.

select — Dropdown

<label for="cls">Class:</label>
<select id="cls" name="class">
    <option value="">-- Select Class --</option>
    <option value="9">Class 9</option>
    <option value="10" selected>Class 10</option>
    <option value="11">Class 11</option>
</select>
Class: [ Class 10 ▼ ] ← click par list khulti hai; Class 10 pehle se chuna
तीन details जो professionals कभी नहीं छोड़ते: (1) पहला खाली "-- Select --" option, ताकि असली choice जानबूझकर हो, गलती से नहीं; (2) value vs दिखता text — user को "Class 10" दिखता है पर server को class=10 मिलता है (database के लिए साफ data); (3) selected किसी option को pre-pick करता है. लंबी related lists के लिए options को <optgroup label="Science Stream"> में लपेटिए — dropdown के अंदर bold group headings दिखती हैं.

textarea — जब एक line काफी नहीं

<label for="addr">Address:</label>
<textarea id="addr" name="address" rows="4" cols="40"
          placeholder="House no, street, city, PIN..."></textarea>
Address: ┌────────────────────────┐ │ │ │ │ ← 4 lines ooncha, kone se resize └────────────────────────┘
दो traps: (1) textarea input NAHI है — pair tag है, और default value tags के BEECH जाती है, value attribute में नहीं. (2) Tags के बीच छोड़ा whitespace field का starting content बन जाता है — <textarea> </textarea> रहस्यमयी spaces से शुरू होता है. Tags सटे रखिए: <textarea></textarea>.

button — और उसके 3 types

<button type="submit">Send Application</button>   form bhejta hai
<button type="reset">Clear Form</button>          saare fields khali
<button type="button">Check Fees</button>         KUCH NAHI karta (JS yahan lagti hai)
वह trap जो हर किसी को एक बार काटता है: form के अंदर button का DEFAULT type submit है. बिना type="button" के "Show/Hide password" button लगाइए और click होते ही आधा भरा पूरा form SUBMIT. Rule: form के अंदर हर non-submitting button पर explicit type="button". (पुराना <input type="submit" value="Send"> अब भी चलता है; <button> बेहतर है क्योंकि अंदर icons और markup रख सकता है.)

fieldset + legend — बड़े form की grouping

<fieldset>
    <legend>Student Details</legend>
    ...name, class, DOB fields...
</fieldset>
<fieldset>
    <legend>Parent Details</legend>
    ...father name, mobile fields...
</fieldset>
┌─ Student Details ──────────────┐ │ name, class, DOB fields │ └────────────────────────────────┘ ┌─ Parent Details ───────────────┐ │ father name, mobile fields │ └────────────────────────────────┘

Related fields के चारों ओर title वाला दिखता डिब्बा — कागज़ वाले admission form के sections, अब HTML में. Screen readers अंदर के हर field के साथ legend बोलते हैं ("Parent Details — Mobile") — लंबे forms पर बड़ी accessibility जीत.

datalist — suggestions WALA text field

<label for="city">City:</label>
<input list="cities" id="city" name="city">
<datalist id="cities">
    <option value="Aligarh">
    <option value="Agra">
    <option value="Bulandshahr">
    <option value="Khurja">
</datalist>
City: [ Al| ] ┌────────────┐ │ Aligarh │ ← type karte hi suggestions live filter hote hain └────────────┘
select vs datalist — interview का differentiator: select = SIRF list में से चुनो (सख्त); datalist = type करते suggestions आते हैं पर user कुछ भी और भी लिख सकता है (लचीला). City fields, search boxes → datalist; class/gender जहां सिर्फ fixed values valid हों → select. जोड़ने वाला गोंद: input का list attribute datalist की id से match.
← Back to HTML Tutorial
🔗

Share this topic with a friend

यह topic किसी दोस्त को भेजें

Found it useful? Send it to a classmate learning the same thing.

अच्छा लगा? जो दोस्त यही सीख रहा है, उसे भेज दीजिए।

💻 Live Code Editor

इस पेज का code यहाँ तैयार है — बदलिए और तुरंत नतीजा देखिए. कुछ install किए बिना.
👁 Live Preview
सब कुछ आपके browser में ही चलता है — कोई server, कोई signup नहीं. JavaScript का console.log देखने के लिए F12 दबाइए.