एचटीएमएल <ऑप्टग्रुप> टैग

<घंटा/>

HTML में तत्व का उपयोग ड्रॉप-डाउन सूची में विकल्पों को समूहीकृत करने के लिए किया जाता है। उदाहरण के लिए, आपने समूहीकृत सूची आइटम देखे होंगे, उदाहरण के लिए, स्नातक और स्नातकोत्तर पाठ्यक्रम एक ही ड्रॉप-डाउन सूची में विभिन्न समूहों में प्रदर्शित होते हैं।

निम्नलिखित विशेषताएं हैं-

अक्षम :निर्दिष्ट करता है कि एक विकल्प-समूह अक्षम किया जाना चाहिए
लेबल :एक विकल्प-समूह के लिए एक लेबल निर्दिष्ट करता है आइए अब तत्व को लागू करने के लिए एक उदाहरण देखें:

आइए अब तत्व को लागू करने के लिए एक उदाहरण देखें -

उदाहरण

<!DOCTYPE html>
<html>
<body>
<h2>Educational Qualification</h2>
<select>
   <optgroup label="Graduation">
   <option value="bca">BCA</option>
   <option value="bcom">B.COM</option>
   <option value="btech">B.TECH</option>
</optgroup>
   <optgroup label="Postgraduation">
   <option value="mca">MCA</option>
   <option value="mcom">M.COM</option>
   <option value="mtech">M.TECH</option>
   <option value="msc">M.Sc</option>
</optgroup>
</select>
</body>
</html>

आउटपुट

एचटीएमएल ऑप्टग्रुप टैग

उपरोक्त उदाहरण में, हमारे पास दो अनुभागों के साथ एक ड्रॉपडाउन सूची सेट करने के लिए दो ऑप्टग्रुप हैं। इस तरह, हमने ड्रॉप-डाउन सूची में विकल्पों को समूहीकृत किया है−

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

विकल्प तत्व सेट का उपयोग ड्रॉप-डाउन सूची के लिए अलग-अलग विकल्प सेट करने के लिए किया जाता है और उपयोगकर्ताओं को उनमें से किसी एक को एक विकल्प समूह से चुनने की अनुमति देता है-

<option value="bca">BCA</option>
<option value="bcom">B.COM</option>
<option value="btech">B.TECH</option>