Grouping Form Elements in HTML: यदि हमारे Select Box में बहुत सारे Items हों, तो हम हमारे सभी Items का एक Group बना सकते हैं। Group बनाने के लिए हमें <optgroup> Element का प्रयोग करना होता है, जो कि सभी Container Element के एक Group की तरह काम करता है। <optgroup> Element में हम label Attribute का प्रयोग कर सकते हैं, जिसका मान Options के Group के Label का काम करता है। इसे हम निम्न उदाहरण द्वारा समझ सकते हैं:
<html> <body> <form action="http://www.demo.org/info.php" method="get" name="frmInfo"> Please select the product you are interested in:<br /> <select name="selInformation"> <optgroup label="Hardware"> <option value="Desktop">Desktop computers</option> <option value="Laptop">Laptop computers</option> </optgroup> <optgroup label="Software"> <option value="OfficeSoftware">Office software</option> <option value="Games">Games</option> </optgroup> <optgroup label="Peripherals"> <option value="Monitors">Monitors</option> <option value="InputDevices">Input Devices</option> <option value="Storage">Storage</option> </optgroup> </select> <input type="submit" value="Submit" /> </form> <body> <html>
अलग-अलग Web Browser <optgroup> Element को अलग-अलग तरह से Display करते हैं। Items को Group करने का एक Alternative तरीका ये है कि हम एक ऐसा <option> Element Add करें, जिसमें disabled Attribute का प्रयोग किया गया हो। इस प्रक्रिया को हम निम्न उदाहरण द्वारा समझ सकते हैं:
<html> <body> <form action="http://www.example.org/info.php" method="get" name="frmInfo"> Please select the product you are interested in:<br /> <select name="selInformation"> <option disabled="disabled" value=""> -- Hardware -- </option> <option value="Desktop">Desktop computers</option> <option value="Laptop">Laptop computers</option> <option disabled="disabled" value=""> -- Software -- </option> <option value="OfficeSoftware">Office software</option> <option value="Games">Games</option> <option disabled="disabled" value=""> -- Peripherals -- </option> <option value="Monitors">Monitors</option> <option value="InputDevices">Input Devices</option> <option value="Storage">Storage</option> </select> <input type="submit" value="Submit" /> </form> <body> <html>
Select Boxes Attributes
<select> Element के साथ हम सभी Universal Attributes, User Interface Attributes, disabled, readonly, tabindex व accesskey Attributes का प्रयोग कर सकते हैं। इसी तरह से हम <option> Element के साथ सभी Universal Attributes, User Interface Attributes, disabled, readonly, tabindex व accesskey Attributes का प्रयोग कर सकते हैं। (Grouping Form Elements in HTML)
ये Article इस वेबसाईट पर Selling हेतु उपलब्ध EBook HTML5 with CSS3 in Hindi से लिया गया है। इसलिए यदि ये Article आपके लिए उपयोगी रहा, तो निश्चित रूप से ये पुस्तक भी आपके लिए काफी उपयोगी साबित होगी।
HTML5 with CSS3 in Hindi | Page: 481 | Format: PDF
