Form Types

☑️ Selection Controls — Choose From Options

<label><input type="checkbox"> Agree</label>

Selection controls se users CHOOSE kar sakte hain predefined options. Checkboxes multiple selections ke liye. Radios group se ek choice karo. Select dropdown menu ke liye. Datalist autocomplete suggestions ke liye. Har ka specific kaam hai — mat mix karo.

checkbox = multiple options independently check/uncheck karo. radio = group se ek choice karo (linked by name attribute). select = dropdown menu. datalist = input ke neeche suggestions. output = calculated values display.

🛺

Auto Stand Analogy: "Sir auto chahiye parcel?" Checkbox. "Cash ya UPI?" Radio. "Kon sa size?" Select dropdown. Har ka specific kaam hai. Mix mat karo = user confusion.

Code Example

HTML — Selection Controls — Choose From Options

<!-- Checkboxes — multiple selections -->
<fieldset>
  <legend>Extra Items (choose any number)</legend>
  <label><input type="checkbox" value="raitta"> Raita</label>
  <label><input type="checkbox" value="chicken"> Chicken</label>
  <label><input type="checkbox" value="mutton" checked> Mutton Biryani ✅</label>
  <label><input type="checkbox" value="mirchi"> Mirchi ka salan</label>
  <label><input type="checkbox" value="raita" checked> Extra Raita ✅</label>
</fieldset>

<!-- Radio — group se ek choice -->
<fieldset>
  <legend>Payment Method</legend>
  <label><input type="radio" name="payment" value="upi" checked> UPI</label>
  <label><input type="radio" name="payment" value="card"> Card Payment</label>
  <label><input type="radio" name="payment" value="cod"> Cash on delivery</label>
</fieldset>

<!-- Select dropdown -->
<label for="city">Select City:</label>
<select id="city">
  <option value="">-- Select City --></option>
  <optgroup label="Telangana">
    <option value="hyd">Hyderabad</option>
    <option value="vizag">Visakhapatnam</option>
    <option value="warangal">Warangal</option>
  </optgroup>
  <optgroup label="Andhra Pradesh">
    <option value="vijayawada">Vijayawada</option>
    <option value="tirupati">Tirupati</option>
  </optgroup>
</select>

<!-- Datalist — autocomplete suggestions -->
<input list="hyd-food" id="hyd-food" placeholder="Type to search..."
  oninput="fetchSuggestions()">
<datalist id="hyd-food">
  <option value="biryani">Hyderabadi Dum Biryani</option>
  <option value="haleem">Haleem</option>
  <option value="chai">Irani Chai</option>
  <option value="biryani">Chicken Biryani</option>
  <option value="kebab">Kebab</option>
</datalist>

<!-- Output — calculated result -->
<form oninput="total.value = qty.value * price.value">
  <input type="number" id="qty" value="2" min="1" max="10">
  <span>×</span>
  <input type="number" id="price" value="450" min="0">
  <span>=</span>
  <output id="total">₹900</output>
</form>

<!-- Progress bar -->
<label>Download progress:</label>
<progress value="70" max="100"></progress>
70% complete

<!-- Meter/gauge -->
<label>Battery level:</label>
<meter value="0.7" min="0" max="1" low="0.25" high="0.75"></meter>
70% — Low battery

<!-- Textarea — multi-line text -->
<textarea rows="4" placeholder="Apna address likho..."></textarea>

type="checkbox"Multiple independent selections (check/uncheck)

name="payment"Radio groups — same name = one choice per group

checkedPre-checked option — pre-selected by default

<select>Dropdown menu with predefined options

<optgroup>Options ko label headers ke saath group karo select mein

<datalist>Input ke neeche autocomplete suggestions (no visible dropdown)

<output>Calculated result display (read-only, user input nahi kar sakta)

value=""Default/placeholder option in select dropdown

low/high/optimumMeter zones — green/yellow/red color coding

rows/colsTextarea size with rows and cols attributes

✅ When to Use

Multiple choice questions with multiple answers → checkbox
Group se ek choice karna → radio (name attribute se group karo)
Long dropdown selections → select with optgroup
Autocomplete suggestions → datalist
Calculated results → output
Progress indicators → progress
Gauges/meters → meter
Multi-line text → textarea

❌ When NOT to Use

Binary yes/no questions with one option → radio use karo (checkbox mat)
Short 2-3 options → radio better hai (single choice mein zyada intuitive)
10+ options → select with optgroup (radio se zyada better)

💡

Hamesha <label> ko form controls ke saath pair karo. Label ko ek jagah rakho, input doosre jagah — `for` attribute label pe `id` se connect karo. Click anywhere on label text pe input click ho jayega. Bada click target (good for mobile UX) aur proper accessibility dono milega.

← Back to Forms Chapter