HTML ऑप्टग्रुप
In this page:
<select name="name">
<optgroup label="Group label">
<option value="value">Label</option>
</optgroup>
</select>optgroup से Options को ग्रुप करना
optgroup एक <select> dropdown के अंदर संबंधित <option> एलिमेंट्स के एक सेट को लपेटता है, और इसका label attribute उस ग्रुप के ऊपर एक बोल्ड हेडिंग दिखाता है, जिससे वह उसी dropdown के दूसरे ग्रुप्स से विज़ुअली अलग दिखता है, बिना dropdown के व्यवहार को बदले।
- जब किसी select dropdown में लगभग 10-15 ऑप्शन से ज़्यादा हो जाएं, तब optgroup का उपयोग करें, क्योंकि तभी बिना लेबल के स्कैन करना थकाऊ लगने लगता है।
- Accepted attributes:
- label — required text shown for the group
- disabled — boolean
उदाहरण: Grouping Options with optgroup
<select>
<optgroup label="Fruits">
<option>Apple</option>
<option>Banana</option>
</optgroup>
</select>पूरे ग्रुप को Disable करना
किसी optgroup में disabled attribute जोड़ने से उस ग्रुप के अंदर के सभी ऑप्शन एक साथ ग्रे-आउट होकर disable हो जाते हैं, जो पूरी category (जैसे out-of-stock product types) को अस्थायी रूप से छुपाने के लिए उपयोगी है, बिना हर individual ऑप्शन को एक-एक करके disable किए।
- किसी पूरी अनुपलब्ध category को एक साथ ग्रे-आउट करने के लिए disabled optgroup का उपयोग करें, बजाय इसके कि उसके अंदर हर ऑप्शन को अलग-अलग disable किया जाए।
- Accepted values:
- disabled — boolean attribute on optgroup
- Disables all contained options
उदाहरण: Disabling an Entire Group
<select>
<optgroup label="Out of Stock" disabled>
<option>Grapes</option>
</optgroup>
</select>किसी ग्रुप के अंदर एक Option को Pre-select करना
किसी optgroup के अंदर नेस्ट किए गए <option> पर selected attribute बिल्कुल वैसे ही काम करता है जैसे यह बिना ग्रुप किए गए option पर करता है -- ऑप्शन को ग्रुप करने से डिफ़ॉल्ट selection, फॉर्म सबमिशन, या ऑप्शन के value attribute का व्यवहार नहीं बदलता।
- जांच लें कि ऑप्शन ग्रुप किए जाने के बाद भी आपका pre-selected डिफ़ॉल्ट विज़ुअली सही लगता है -- तीसरे ग्रुप में छुपा हुआ selected ऑप्शन यूज़र से आसानी से चूक सकता है।
- Accepted values:
- selected — boolean attribute on option
- Only one selected option in a single-select
उदाहरण: Pre-selecting an Option Within a Group
<select>
<optgroup label="Sizes">
<option>Small</option>
<option selected>Medium</option>
</optgroup>
</select>एक Dropdown में कई Groups
एक single select में एक के बाद एक कितने भी optgroup एलिमेंट हो सकते हैं, और यह ग्रुप किए गए और बिना ग्रुप किए गए ऑप्शन को भी मिला सकता है -- वे ऑप्शन जो सीधे select के अंदर, बिना किसी wrapping optgroup के रखे जाते हैं, बिना किसी हेडिंग के, लेबल किए गए ग्रुप्स के साथ ही दिखाई देते हैं।
उदाहरण: Multiple Groups in One Dropdown
<select>
<optgroup label="Fruits">
<option>Apple</option>
</optgroup>
<optgroup label="Vegetables">
<option>Carrot</option>
</optgroup>
</select>Optgroup Labels को स्टाइल करना
ब्राउज़र optgroup label पर अपने आप एक डिफ़ॉल्ट बोल्ड स्टाइल लागू करते हैं, और हालांकि dropdown internals को ब्राउज़र में CSS से स्टाइल करना काफी मुश्किल माना जाता है, लेकिन label टेक्स्ट को आमतौर पर optgroup selector को टारगेट करके बेसिक font-weight और color properties से कस्टमाइज़ किया जा सकता है, हालांकि रेंडरिंग अभी भी operating system के हिसाब से बदलती है।
उदाहरण: Styling Optgroup Labels
<style>
optgroup {
font-weight: bold;
color: navy;
}
</style>
<select>
<optgroup label="Fruits">
<option>Apple</option>
</optgroup>
</select>- एक optgroup के अंदर दूसरा optgroup nest करना, जो supported नहीं है -- optgroup groups सिर्फ एक level गहरे हो सकते हैं।
- optgroup पर label attribute भूल जाना, जिससे group heading खाली रह जाता है और grouping का पूरा मकसद खत्म हो जाता है।
- optgroup label को खुद selectable बनाने की कोशिश करना -- यह सिर्फ एक heading है, dropdown में कभी selectable option नहीं।
- optgroup किसी select dropdown के अंदर related option elements के एक set को wrap करता है, उनके ऊपर एक bold, non-selectable label जोड़ते हुए।
- optgroup पर label attribute ज़रूरी है और यही वह चीज़ है जो असल में group heading के रूप में दिखती है।
- optgroup सिर्फ visual organization है -- जब user उसके अंदर कोई option चुनता है तो यह submitted name/value pair को नहीं बदलता।
optgroup HTML forms के सबसे शुरुआती दिनों से हर browser में supported है।
Chapter Quiz — Complete all 7 topics to unlock
0/7 topics done
Complete these topics first: