HTML5 అడ్వాన్స్‌డ్ ఫారమ్ కంట్రోల్స్: select, datalist, textarea, Checkbox & Radio

<fieldset style="border: 1px solid #cbd5e1; border-radius: 8px; padding: 16px; max-width: 400px;">
  <legend style="color: #059669; font-weight: bold;">పేమెంట్ విధానాన్ని ఎంచుకోండి</legend>

  <!-- అన్నింటికీ name="payment_method" సమానంగా ఉంది -->
  <p>
    <input type="radio" id="pay-upi" name="payment_method" value="upi" checked>
    <label for="pay-upi">Google Pay / PhonePe (UPI)</label>
  </p>

  <p>
    <input type="radio" id="pay-card" name="payment_method" value="credit_card">
    <label for="pay-card">డెబిట్ / క్రెడిట్ కార్డు</label>
  </p>

  <p>
    <input type="radio" id="pay-cod" name="payment_method" value="cash_on_delivery">
    <label for="pay-cod">క్యాష్ ఆన్ డెలివరీ (COD)</label>
  </p>
</fieldset>

<fieldset style="border: 1px solid #cbd5e1; border-radius: 8px; padding: 16px; max-width: 450px;">
  <legend style="color: #059669; font-weight: bold;">మీకు తెలిసిన భాషలను ఎంచుకోండి</legend>

  <p>
    <input type="checkbox" id="lang-html" name="skills" value="html5" checked>
    <label for="lang-html">HTML5 & CSS3</label>
  </p>

  <p>
    <input type="checkbox" id="lang-js" name="skills" value="javascript" checked>
    <label for="lang-js">JavaScript ES6+</label>
  </p>

  <p>
    <input type="checkbox" id="lang-py" name="skills" value="python">
    <label for="lang-py">Python 3</label>
  </p>

  <hr style="border: none; border-top: 1px solid #e2e8f0; margin: 12px 0;">

  <!-- ఒంటరి నిబంధనల చెక్‌బాక్స్ -->
  <p>
    <input type="checkbox" id="terms" name="agree_terms" required>
    <label for="terms"><strong>నేను సైట్ నిబంధనలను అంగీకరిస్తున్నాను</strong></label>
  </p>
</fieldset>

<label for="state-select">మీ నివాస రాష్ట్రాన్ని ఎంచుకోండి:</label><br>
<select id="state-select" name="state" required style="width: 100%; max-width: 350px; padding: 8px; margin-top: 6px; border-radius: 6px; border: 1px solid #cbd5e1;">
  <!-- ఖాళీ డిఫాల్ట్ ప్రాంప్ట్ ఆప్షన్ -->
  <option value="" disabled selected>-- రాష్ట్రాన్ని ఎంచుకోండి --</option>
  <option value="TG">తెలంగాణ (Telangana)</option>
  <option value="AP">ఆంధ్రప్రదేశ్ (Andhra Pradesh)</option>
  <option value="KA">కర్ణాటక (Karnataka)</option>
  <option value="TN">తమిళనాడు (Tamil Nadu)</option>
</select>

<label for="course-select">మీరు నేర్చుకోవాలనుకుంటున్న కోర్సు:</label><br>
<select id="course-select" name="selected_course" style="width: 100%; max-width: 350px; padding: 8px; margin-top: 6px;">
  <!-- గ్రూప్ 1: ఫ్రంటెండ్ -->
  <optgroup label="🌐 ఫ్రంటెండ్ టెక్నాలజీస్">
    <option value="html5">HTML5 & CSS3 మాస్టర్‌క్లాస్</option>
    <option value="javascript">ఆధునిక జావాస్క్రిప్ట్ (ES2026)</option>
    <option value="react">React.js ఫ్రేమ్‌వర్క్</option>
  </optgroup>

  <!-- గ్రూప్ 2: బ్యాకెండ్ -->
  <optgroup label="⚙️ బ్యాకెండ్ & సిస్టమ్స్">
    <option value="python">పైథాన్ 3 ప్రోగ్రామింగ్</option>
    <option value="java">జావా ఎంటర్‌ప్రైజ్</option>
    <option value="cpp">సి++ సిస్టమ్స్ కోడింగ్</option>
  </optgroup>
</select>

<!-- 1. సాధారణ ఇన్‌పుట్‌కు list="id" జతచేయాలి -->
<label for="browser-choice">మీకు ఇష్టమైన బ్రౌజర్ ఎంచుకోండి (లేదా టైప్ చేయండి):</label><br>
<input type="text" id="browser-choice" name="browser" list="browser-list" placeholder="టైప్ చేయండి..." style="width:100%; max-width:350px; padding:8px; margin-top:6px;">

<!-- 2. ప్రివ్యూ సలహాల డాటాలిస్ట్ -->
<datalist id="browser-list">
  <option value="Google Chrome">
  <option value="Mozilla Firefox">
  <option value="Apple Safari">
  <option value="Microsoft Edge">
  <option value="Brave Browser">
</datalist>

<label for="feedback">మీ వివరణాత్మక అభిప్రాయం (Feedback):</label><br>
<textarea id="feedback" name="user_feedback" 
          rows="5" cols="40" 
          maxlength="500" 
          placeholder="గరిష్టంగా 500 అక్షరాలలో మీ సూచనలు తెలపండి..." 
          style="width: 100%; max-width: 500px; padding: 10px; border-radius: 8px; border: 1px solid #cbd5e1; resize: vertical;"></textarea>

<form action="/order" method="POST" style="max-width: 500px; padding: 24px; border: 1px solid #cbd5e1; border-radius: 12px; background: #ffffff; box-shadow: 0 4px 12px rgba(0,0,0,0.05);">
  <h2 style="margin-top:0; color:#0f172a;">🛒 సూపర్ పిజ్జా ఆర్డర్ ఫారమ్</h2>

  <!-- 1. డ్రాప్‌డౌన్: సైజు -->
  <p>
    <label for="p-size"><strong>పిజ్జా సైజు:</strong></label><br>
    <select id="p-size" name="pizza_size" style="width:100%; padding:8px; margin-top:4px;">
      <option value="reg">రెగ్యులర్ (7 అంగుళాలు)</option>
      <option value="med" selected>మీడియం (10 అంగుళాలు)</option>
      <option value="lar">లార్జ్ (12 అంగుళాలు)</option>
    </select>
  </p>

  <!-- 2. రేడియో: క్రస్ట్ టైప్ -->
  <p>
    <strong>క్రస్ట్ రకం:</strong><br>
    <label><input type="radio" name="crust" value="pan" checked> పాన్ పిజ్జా</label> &nbsp;
    <label><input type="radio" name="crust" value="thin"> థిన్ క్రస్ట్</label> &nbsp;
    <label><input type="radio" name="crust" value="cheese"> చీజ్ బర్స్ట్</label>
  </p>

  <!-- 3. చెక్‌బాక్స్: ఎక్స్‌ట్రా టాపింగ్స్ -->
  <p>
    <strong>ఎక్స్‌ట్రా టాపింగ్స్:</strong><br>
    <label><input type="checkbox" name="toppings" value="cheese"> ఎక్స్‌ట్రా చీజ్ (+₹50)</label><br>
    <label><input type="checkbox" name="toppings" value="olives"> బ్లాక్ ఆలివ్స్ (+₹30)</label>
  </p>

  <!-- 4. డాటాలిస్ట్: డెలివరీ ఏరియా -->
  <p>
    <label for="area"><strong>డెలివరీ లొకేషన్ (టైప్ చేయండి):</strong></label><br>
    <input type="text" id="area" name="delivery_area" list="area-options" placeholder="హైటెక్ సిటీ, మాదాపూర్..." style="width:100%; padding:8px; margin-top:4px;">
    <datalist id="area-options">
      <option value="హైటెక్ సిటీ, హైదరాబాద్">
      <option value="మాదాపూర్, హైదరాబాద్">
      <option value="గచ్చిబౌలి, హైదరాబాద్">
      <option value="కూకట్‌పల్లి, హైదరాబాద్">
    </datalist>
  </p>

  <!-- 5. టెక్స్ట్ ఏరియా: అడ్రస్ -->
  <p>
    <label for="addr"><strong>పూర్తి ఇంటి చిరునామా:</strong></label><br>
    <textarea id="addr" name="delivery_address" rows="3" style="width:100%; padding:8px; margin-top:4px;" placeholder="ఫ్లాట్ నం, అపార్ట్‌మెంట్, ల్యాండ్‌మార్క్..."></textarea>
  </p>

  <button type="submit" style="background:#10b981; color:white; border:none; padding:12px 24px; border-radius:8px; font-weight:bold; font-size:15px; cursor:pointer; width:100%;">
    🍕 ఆర్డర్ కన్ఫర్మ్ చేయండి
  </button>
</form>