HTML <select> required एट्रिब्यूट

<select> एलिमेंट का required एट्रिब्यूट

<select> एलिमेंट का required एट्रिब्यूट एक बूलियन एट्रिब्यूट है जो उपयोगकर्ताओं को बताता है कि ड्रॉप-डाउन अनिवार्य है और फॉर्म सबमिट करने से पहले इसमें से एक मान चुनना आवश्यक है। यदि उपयोगकर्ता ड्रॉप-डाउन से कोई मान चुने बिना फॉर्म सबमिट करने का प्रयास करता है, तो फॉर्म सबमिट नहीं होगा और ब्राउज़र एक अंतर्निहित चेतावनी संदेश दिखाएगा। यह एट्रिब्यूट HTML5 में पेश किया गया था।

वाक्यविन्यास (Syntax)

<select required>

उदाहरण

<!DOCTYPE html>
<html>
<body>
<h1>Candidate Profile</h1>
<p>Following are the details to be submitted by the candidate:</p>
<h2>Educational Qualification</h2>
<form action="">
  <section>
    <h3>Graduation</h3>
    <select required>
      <option value="">None</option>
      <option value="bca">BCA</option>
      <option value="bcom">B.COM</option>
      <option value="btech">B.TECH</option>
    </select>
  </section>
  <section>
    <h3>Postgraduation</h3>
    <select>
      <option value="mca">MCA</option>
      <option value="mcom">M.COM</option>
      <option value="mtech">M.TECH</option>
      <option value="msc">M.Sc</option>
    </select>
  </section><br>
  <input type="submit" value="Next">
</form>
</body>
</html>

आउटपुट

यह निम्न आउटपुट उत्पन्न करेगा। हमने आवश्यक ड्रॉप-डाउन सूची से कोई आइटम नहीं चुना, इसलिए निम्न चेतावनी दिखाई देगी:

HTML <select> required एट्रिब्यूट

कोड विश्लेषण

हमने <select> का उपयोग करके दो ड्रॉप-डाउन सूचियां सेट की हैं:

<section>
  <h3>Graduation</h3>
  <select required>
    <option value="">None</option>
    <option value="bca">BCA</option>
    <option value="bcom">B.COM</option>
    <option value="btech">B.TECH</option>
  </select>
</section>
<section>
  <h3>Postgraduation</h3>
  <select>
    <option value="mca">MCA</option>
    <option value="mcom">M.COM</option>
    <option value="mtech">M.TECH</option>
    <option value="msc">M.Sc</option>
  </select>
</section>

हमने उनमें से एक को उपयोगकर्ताओं द्वारा अनिवार्य रूप से भरने के लिए required एट्रिब्यूट का उपयोग करके सेट किया है, अन्यथा फॉर्म सबमिट नहीं होगा:

<section>
  <h3>Graduation</h3>
  <select required>
    <option value="">None</option>
    <option value="bca">BCA</option>
    <option value="bcom">B.COM</option>
    <option value="btech">B.TECH</option>
  </select>
</section>

महत्वपूर्ण तकनीक: प्लेसहोल्डर विकल्प

पहले <option> में value="" (खाली मान) और टेक्स्ट "None" या "Select..." रखें। यह सुनिश्चित करता है कि उपयोगकर्ता को एक वास्तविक विकल्प चुनना पड़े; खाली मान ब्राउज़र द्वारा "अनभरा" माना जाता है।

CSS स्टाइलिंग

select:required:invalid { border-color: red; }