दिन 7: Forms 2: Select, Textarea और Validation

<label for="occasion">Occasion</label>
<select id="occasion" name="occasion" required>
  <option value="">– Choose –</option>
  <optgroup label="Family">
    <option value="wedding">Wedding</option>
    <option value="birthday">Birthday</option>
  </optgroup>
  <optgroup label="Festivals">
    <option value="diwali" selected>Diwali</option>
    <option value="rakhi">Raksha Bandhan</option>
  </optgroup>
  <option value="corporate">Corporate gifting</option>
</select>
<br><br>
<label for="boxes">Box sizes (Ctrl/⌘ for many)</label><br>
<select id="boxes" name="boxes" multiple size="3">
  <option>250 g</option><option>500 g</option><option>1 kg</option>
</select>

<label for="city">Delivery city</label>
<input id="city" name="city" list="cities" placeholder="Start typing…">
<datalist id="cities">
  <option value="Jaipur"><option value="Ajmer"><option value="Kota"><option value="Udaipur"><option value="Jodhpur">
</datalist>

<label for="note">Special instructions</label><br>
<textarea id="note" name="note" rows="4" cols="40" maxlength="200"
  placeholder="e.g. less sugar, Jain (no onion-garlic) namkeen"></textarea>

<fieldset>
  <legend>Payment</legend>
  <label><input type="radio" name="pay" value="upi" checked> UPI</label>
  <label><input type="radio" name="pay" value="cash"> Cash on pickup</label>
</fieldset>
<fieldset disabled>
  <legend>Gift wrapping (coming soon)</legend>
  <label><input type="checkbox"> Add ribbon</label>
</fieldset>

<form onsubmit="alert('All fields valid – would be sent!'); return false;">
  <p><label>Name* <input name="name" required minlength="3"></label></p>
  <p><label>Mobile* <input name="mobile" type="tel" required pattern="[6-9][0-9]{9}" title="10-digit Indian mobile starting with 6–9" placeholder="9829012345"></label></p>
  <p><label>PIN code <input name="pin" pattern="[1-9][0-9]{5}" title="6-digit PIN code"></label></p>
  <p><label>Quantity (kg)* <input name="qty" type="number" required min="5" max="200" step="0.5"></label></p>
  <p><label>Event date* <input name="date" type="date" required min="2026-01-01"></label></p>
  <button>Send enquiry</button>
</form>

<form novalidate>
  <p><label>Order id <input value="BK-1042" readonly></label> (readonly – sent)</p>
  <p><label>Coupon <input value="DIWALI20" disabled></label> (disabled – NOT sent)</p>
  <p><label>Name <input name="n" autofocus autocomplete="name"></label></p>
  <p><label>OTP <input inputmode="numeric" autocomplete="one-time-code" maxlength="6"></label></p>
</form>

<form action="https://httpbin.org/post" method="post" target="_blank">
  <fieldset>
    <legend>Your details</legend>
    <p><label for="n">Name*</label><br><input id="n" name="name" required minlength="3" autocomplete="name"></p>
    <p><label for="m">Mobile*</label><br><input id="m" name="mobile" type="tel" required pattern="[6-9][0-9]{9}" title="10-digit mobile" autocomplete="tel"></p>
  </fieldset>
  <fieldset>
    <legend>Order</legend>
    <p><label for="o">Occasion*</label><br>
      <select id="o" name="occasion" required><option value="">– Choose –</option><option>Wedding</option><option>Diwali</option><option>Corporate</option></select></p>
    <p><label for="q">Quantity (kg)*</label><br><input id="q" name="qty" type="number" min="5" max="200" step="0.5" required></p>
    <p><label for="d">Event date*</label><br><input id="d" name="event_date" type="date" required></p>
    <p><label for="t">Notes</label><br><textarea id="t" name="notes" rows="3" maxlength="300"></textarea></p>
  </fieldset>
  <p><label><input type="checkbox" name="consent" required> I agree to be contacted on WhatsApp</label></p>
  <button type="submit">Send enquiry</button>
</form>