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

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

<select> एलिमेंट का size एट्रिब्यूट ड्रॉप-डाउन सूची से दृश्यमान सूची आइटम्स की संख्या सेट करता है। यदि size 1 से अधिक सेट किया जाता है, तो एक स्क्रॉलबार जुड़ जाता है और सूची एक सूची बॉक्स (list box) की तरह दिखती है न कि ड्रॉपडाउन की तरह।

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

<select size="num">

ऊपर, num ड्रॉप-डाउन सूची में दृश्यमान सूची आइटम्स की संख्या है।

उदाहरण

<!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 size="2">
      <option value="bca">BCA</option>
      <option value="bcom">B.COM</option>
      <option value="btech">B.TECH</option>
      <option value="btech">B.SC</option>
    </select>
  </section>
  <section>
    <h3>Postgraduation</h3>
    <select size="2">
      <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>

आउटपुट

दोनों ड्रॉप-डाउन सूची बॉक्स के रूप में दिखेंगी जिनमें एक समय में 2 आइटम दृश्यमान होंगे:

कोड विश्लेषण

हमने size एट्रिब्यूट के साथ दो ड्रॉप-डाउन सूचियां सेट की हैं जो दृश्यमान सूची आइटम्स की संख्या सेट करने की अनुमति देती हैं:

<select size="2">

size="1" बनाम size=">1"

नोट

• multiple एट्रिब्यूट के साथ संयोजित करके बहु-चयन सक्षम करें: <select size="4" multiple>
• CSS से ऊंचाई भी नियंत्रित कर सकते हैं: select { height: 100px; }